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

Posted 2023-03-05

【中文标题】以鼠标位置为中心的图像缩放

【英文标题】：Image zoom centered on mouse position

【发布时间】：2015-07-12 04:47:29

【问题描述】：

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

案例1：将鼠标保持在一点，用鼠标滚轮进行缩放。

结果：完美运行，图像在该特定像素处缩放。

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

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

我的代码在这个小提琴中：

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

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

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

出了什么问题？

【问题讨论】：

为什么不使用画布缩放和平移功能？或者你只需​​要缩放图像对象而不需要其他任何东西？检查这一点：fabricjs.com/kitchensink/#zoom（使用滚动缩放）如果需要，使用画布缩放将允许您在画布中缩放更多对象而无需进行计算。如果你想探索这种可能性，我可以做一个小提琴。

@AndreaBogazzi 我需要在鼠标放置的特定位置进行缩放，画布缩放功能只是缩放图像

是的，我说的是 FABRICJS 平移到点和缩放到点功能。不是帆布的。我看到你正在使用 fabricjs。

@AndreaBogazzi 啊，我明白了。错过了这部分文档。让我试一试

【参考方案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/

我也实现了缩小操作。

【讨论】：

非常感谢！！我已经被困了2天。可以在 8 小时后奖励赏金

任何人都可以仅使用画布实现相同的功能吗？没有任何图书馆？

如果图像的原点在中心而不是左上角，如何使用它？

天哪，谢谢@Michael Laszlo。