如何启用 HTML5 Canvas Pan 效果答案

【问题标题】：How to enable HTML5 Canvas Pan effect如何启用 HTML5 Canvas Pan 效果
【发布时间】：2021-08-02 13:49:16
【问题描述】：

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

我想添加 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); 来创建平移效果，它也不能正常工作。如何在不影响缩放的情况下启用 Canvas Pan 效果。我知道我在这里遗漏了一些东西。

【问题讨论】：

标签： javascript html html5-canvas zooming pan

【解决方案1】：

我能够找出问题所在。为了在上面的代码中平移画布

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

distX 和 distY 分别是平移画布的距离

【讨论】：