在固定点上实现缩放，javascript/canvas [重复]答案

【问题标题】：Implementing zoom on a fixed point, javascript/canvas [duplicate]在固定点上实现缩放，javascript/canvas [重复]
【发布时间】：2010-05-23 16:10:14
【问题描述】：

可能重复：
Zoom in on a point (using scale and translate)

我想用鼠标滚轮实现鼠标指针的缩放。即在鼠标指针下的点保持固定时缩放图像。

这是我的代码，效果不太好

var scala = 1 + event.wheelDelta / 1000;
canvas.context.translate(-canvas.mouse.x * ( scala - 1 ) / canvas.scale,-canvas.mouse.y * ( scala - 1 ) / canvas.scale);
canvas.context.scale(scala,scala);
canvas.scale *= scala;
//canvas.scale is my variable that is initially set to 1.
//canvas.mouse is my variable that represents the mouse position relative to the canvas

【问题讨论】：

什么都不做，或者行为不正常
行为不正确，mouse.x 在窗口坐标中，而 translate 使用缩放坐标，这就是我认为的问题所在。
如果我使用 scale(1.3,1.3);scale(0.7,0.7);物体回到原来的位置但是 1*1.3*0.7!=1
mouse.x 是在画布坐标还是屏幕坐标？
1.3*0.7 接近 1 (0.91)。你能把完整的代码放在jsfiddle.net吗？

标签： javascript html canvas

【解决方案1】：

无需查看其他任何内容，您将需要 2 次翻译：一次将鼠标点移动到 (0,0) 之前，一次之后将 (0,0) 移动（现在是放大的图片）到鼠标是。

【讨论】：

【解决方案2】：

解决了，答案就在这里：same question

【讨论】：

【解决方案3】：

我的猜测是，如果您要保存缩放级别，则每次重绘后都需要canvas.context.restore()。

【讨论】：