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

Question

我正在用Fabric.js编写一个脚本来缩放当前鼠标位置的图像.我已经取得了一些进展,但某处出现了错误.

案例1:将鼠标放在一个位置并使用鼠标滚轮进行缩放.

结果:完美地工作,图像放大该特定像素.

案例2:在一个位置放大一点(使用鼠标滚轮放大3-5倍),然后将鼠标移动到新位置并放大.

结果:第一个点工作正常,但移动到另一个点并缩放后,图像位置不正确.

我的代码在这个小提琴:

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

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);

我将这个计算集成到你的演示中并制作了以下小提琴:

我还实现了缩小操作.