图像缩放以鼠标位置为中心

Question

我正在编写一个带有Fabric.js的脚本，以放大当前鼠标位置的图像。我取得了一些进展，但某处有一个错误。

案例1 ：将鼠标保持在某个点，并用鼠标轮换放大。

结果：完美工作，图像在该特定的像素上放大。

案例2：在一个位置放大一点（用鼠标滚轮3-5次），然后将鼠标移至新位置并放大。

结果：第一个点正常工作，但是在移至另一个点并放大后，图像位置不正确。

我的代码在此小提琴中：

https://jsfiddle.net/gauravsoni/y3w0yx2m/1/

我怀疑图像定位逻辑有问题：

imgInstance.set({top:imgInstance.getTop()-newMousY,left:imgInstance.getLeft()-newMousX});

出了什么问题？

Answer 1

解决此难题的关键是了解图像的放大方式。如果我们使用的缩放系数为1.2，则图像变大20％。我们将1.2分配给变量factor并执行以下操作：

image.setScaleX(image.getScaleX() * factor);
image.setScaleY(image.getScaleY() * factor);

图像的左上角停留在图片放大时。现在考虑鼠标光标下的点。光标上方和左侧的每个像素都变大20％。这使光标下方的点向下和向右移动20％。同时，光标处于相同的位置。

为了补偿光标下点的位移，我们将图像移动以使点恢复光标下方。点向右移动；我们以相同的距离向上和向左移动图像。

请注意，图像可能已经在缩放操作之前已在画布中移动，因此光标在缩放之前的水平位置为 currentMouseX - image.getLeft()，同样适用于垂直位置。

这就是我们在缩放之后计算位移的方式：

var dx = (currentMouseX - image.getLeft()) * (factor - 1),
    dy = (currentMouseY - image.getTop()) * (factor - 1);

最后，我们通过在光标下方移动点来补偿位移：

image.setLeft(image.getLeft() - dx);
image.setTop(image.getTop() - dy);

我将此计算集成到您的演示中，并进行了以下小提琴：

https://jsfiddle.net/fglmyxw4/

我还实施了缩放操作。