我遵循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>
我正在尝试更改组织和orgny为了创造泛效应，但它不起作用。甚至当我调用context.translate(orgnx, orgny);来创建Pan效果时，效果也不太好。如何在不影响缩放的情况下启用画布平移效果。我知道我遗漏了什么。
我能找出问题所在。为了在上面的代码
中平移画布context.translate(orgnx, orgny);
orgnx += distX * (1/scale);
orgny += distY * (1/scale);
context.translate(-orgnx, -orgny);
draw();
distX和distY平移画布的距离