如何启用HTML5 Canvas Pan效果

Question

我正在关注 https://www.geeksforgeeks.org/how-to-zoom-in-on-a-point-using-scale-and-translate/ 上的代码，用户可以在其中放大和缩小 HTML 5 Canvas。

我想添加 Canvas Pan 的功能（以便我可以轻松移动多个对象）。

下面的代码

<html>
<head/>
<body>
    <center>
        <canvas id="canvas" width="500" height="500"></canvas>
    </center>
    <script>
        var zoomIntensity = 0.1;
  
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;
  
        var scale = 1;
        var orgnx = 0;
        var orgny = 0;
        var visibleWidth = width;
        var visibleHeight = height;

    draw();
  
        function draw() {
            context.fillStyle = "white";
            context.fillRect(orgnx, orgny, width / scale, height / scale);
            context.fillStyle = "green";
            context.fillRect(250,50,100,100); 
        }
          
        canvas.onwheel = function(event) {
            event.preventDefault();
            var x = event.clientX - canvas.offsetLeft;
            var y = event.clientY - canvas.offsetTop;
            var scroll = event.deltaY < 0 ? 1 : -2;
  
            var zoom = Math.exp(scroll * zoomIntensity);
  
            context.translate(orgnx, orgny);
  
            orgnx -= x / (scale * zoom) - x / scale;
            orgny -= y / (scale * zoom) - y / scale;
  
            context.scale(zoom, zoom);
            context.translate(-orgnx, -orgny);
  
            // Updating scale and visisble width and height
            scale *= zoom;
            visibleWidth = width / scale;
            visibleHeight = height / scale;
        draw();
        }
    </script>
</body>
</html>

我正在尝试更改 orgnx 和 orgny 以创建声像效果，但它不起作用。即使我调用 context.translate(orgnx, orgny); 来创建 Pan 效果，它也无法正常工作。我如何在不影响缩放的情况下启用 Canvas 平移效果。我知道我在这里遗漏了一些东西。

Answer 1

我能够弄清楚这个问题。为了平移上面代码中的canvas

context.translate(orgnx, orgny);
orgnx += distX * (1/scale);
orgny += distY * (1/scale);
context.translate(-orgnx, -orgny);
draw();

distX 和 distY 分别是平移 canvas

的距离

如何启用HTML5 Canvas Pan效果

How to enable HTML5 Canvas Pan effect

html

javascript

zooming

pan

html5-canvas