Question

我有下面的代码，用于缩放图像时缩放。它正在缩放但问题是它始终缩放左上角的图像。它不会缩放我捏的图像部分。关于什么缺失的任何想法？谢谢。

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 input </title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />

    <script type='text/javascript'>

        window.onload = function() {

            document.myStartDist = 0
            document.myScale = 1.0
            document.myOnlyZoomLarger = 'false' /*if true page only can zoom larger, false allows page to shrink */

            document.getElementById('myDiv1').style.WebkitTransformOrigin = '0px 0px';
            document.getElementById('myDiv1').style.webkitTransform = 'scale(0.3)';

            myBodyId.ontouchstart = function(event) {
                myFinger0 = event.touches[0]
                myFinger1 = event.touches[1]
                document.myStartDist = parseFloat(myFinger0.clientY) - parseFloat(myFinger1.clientY)
            }

            myBodyId.ontouchmove = function(event) {
                if (event.touches.length == 2) { /*check if only two fingers on the device*/
                    myFinger0 = event.touches[0]
                    myFinger1 = event.touches[1]
                    myNewWidth = parseInt(myFinger0.clientY) - parseInt(myFinger1.clientY)
                    myChangeX = myNewWidth / document.myStartDist

                    document.myScale = myChangeX
                    if (document.myScale > 1.3) {
                        document.myScale = 1.3

                    }

                    if (document.myOnlyZoomLarger == 'false') {
                        if (document.myScale < 0.1) { /*so web page does not fully disapear*/
                            document.myScale = 0.1
                        }
                        document.getElementById('myDiv1').style.webkitTransform = 'scale(' + document.myScale + ')';
                    }

                    if (document.myOnlyZoomLarger == 'true') {
                        if (document.myScale < 1) { /*resets webpage to original size*/
                            document.myScale = 1.0
                            document.getElementById('myDiv1').style.webkitTransform = 'scale(1.0)';
                            console.log("scale 1.0");
                        } else {
                            document.getElementById('myDiv1').style.webkitTransform = 'scale(' + document.myScale + ')';
                        }
                    }
                } /*end touches  */ 
            } /*end ontouchmove*/
        }
    </script>
</head>
<body>
    <div id="myDiv1">
        <img src="https://s14.postimg.org/timfv18sx/SMRT_Map_Sept16.png" id="pinch-zoom-image-id"  />
    </div>
</body>    
</html>

变换比例不能正确缩放

0 个答案: