1

我需要能够多次缩放 div 并可以更改原点。

请看一下： http: //jsfiddle.net/croydufixe/vdXM7/（见下面的完整代码）

运行此小提琴时，将显示一个灰色正方形，并用红线网格将正方形划分为 4 x 4 。

红色标记位于下一个变换的“原点”。

在框架的顶部，您可以看到两个按钮“+”和“-”以增加（或减少）0.5 倍的比例缩放灰色方块

现在，请使用以下步骤：

  1. 单击 + 按钮：使用红色标记作为原点，灰色方块按 1+0.5 缩放
  2. 通过单击灰色方块的 25% 25% 重新定位红色标记
  3. 再次点击+按钮：灰色方块被缩放（1+0.5+0.5），但这个比例的原点是灰色方块的左上角而不是红色标记
  4. 再次单击“+”：使用红色标记作为原点，对灰色正方形进行缩放 (1+0.5+0.5+0.5)

我不明白第 3 步使用的原点（顶部/左侧，而不是 25%/25%）

感谢您的帮助。

完整代码： 

<head>
    <title></title>
    <script>
        var lastScale=1;
        var originModified = false;

        function drawCanvas()
            {
            var canevas=document.getElementById("canvas");
            var ctx = canevas.getContext("2d");
            var e=document.getElementById("canvas");
            var largeur = e.offsetWidth;
            var hauteur = e.offsetHeight;
            for( var x=0; x<largeur; x+=largeur/4 )
                {
                ctx.moveTo( x, 0 );
                ctx.lineTo( x, hauteur );
                }
            for( var y=0; y<hauteur; y+=hauteur/4 )
                {
                ctx.moveTo( 0, y );
                ctx.lineTo( largeur, y );
                }
            ctx.strokeStyle = '#ff0000';
            ctx.stroke();
            }
        function init( )
            {
            lastScale=1;
            originModified=false;
            var e = document.getElementById( "origin" );
            }
        function incrementalScale( increment )
            {
            var e=document.getElementById("a");
            var eOrigin = document.getElementById("origin");
            //  
            var targetOriginX = eOrigin.offsetLeft;
            var targetOriginY = eOrigin.offsetTop;
            e.style.transformOrigin = targetOriginX + "px " + targetOriginY + "px 0px";
            lastScale += increment;
            var transform = "scale(" + lastScale + ")";
            e.style.transform = transform;
            originModified = false;
            }
        function setOrigin(event)
            {
            if( originModified )
                {
                alert( 'origin already modified : please do a scale');
                return;
                }
            var eOrigin=document.getElementById("origin");
            var ee = document.getElementById("a");
            var deltaX = eOrigin.offsetLeft - ( event.clientX - ee.offsetLeft );
            eOrigin.style.left = ( eOrigin.offsetLeft - deltaX / lastScale ) + "px";
            var deltaY = eOrigin.offsetTop - ( event.clientY - ee.offsetTop );
            eOrigin.style.top = ( eOrigin.offsetTop - deltaY / lastScale ) + "px";
            originModified = true;
            }
    </script>
</head>
<body onload="drawCanvas();init();">
    <div>
        scale <input type="button" onclick="incrementalScale(+0.5)" value="+">
        <input type="button" onclick="incrementalScale(-0.5)" value="-">
    </div>
    <div id="a" style="position:relative;top:400px;left:400px;border:1 px solid red;background-color:#DDD;width:200px;height:200px"
        onmousedown="setOrigin(event);">
        <canvas id="canvas" width="200px" height="200px"></canvas>
        <div id="origin" style="position:absolute;top:100px;left:100px;width:5px;height:5px;background-color:red">
        </div>
    </div>
</body>

4

0 回答 0