以鼠标位置为中心的图像缩放 [英] Image zoom centered on mouse position

问题描述

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

I am writing a script with Fabric.js to zoom an image at the current mouse position. I have made some progress but there is an error somewhere.

案例 1:将鼠标保持在一个点并用鼠标滚轮缩放.

Case 1: Keep the mouse at one point and zoom with the mouse wheel.

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

Result: Works perfectly, image zooms at that particular pixel.

案例 2: 在一个位置稍微放大(用鼠标滚轮 3-5 倍)，然后将鼠标移动到一个新位置并在那里放大.

Case 2: Zoom in a little at one position (3-5 times with mouse wheel), then move the mouse to a new position and zoom in there.

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

Result: Works fine for the first point, but after moving to another point and zooming, the image position is incorrect.

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

My code is in this fiddle:

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

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

I suspect there is something wrong with the image positioning logic:

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

出了什么问题?

推荐答案

解决这个难题的关键是了解图像是如何放大的.如果我们使用 1.2 的缩放系数，图像会变大 20%.我们将 1.2 分配给变量 factor 并执行以下操作:

The key to solving this puzzle is to understand how the image gets enlarged. If we're using a zoom factor of 1.2, the image becomes 20% larger. We assign 1.2 to the variable factor and do the following:

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

图片放大时图片左上角保持不变.现在考虑鼠标光标下的点.光标上方和左侧的每个像素都变大了 20%.这会将光标下的点向下和向右移动 20%.同时，光标在同一位置.

The upper left corner of the image stays in the same place while the picture is enlarged. Now consider the point under the mouse cursor. Every pixel above and to the left of the cursor has become 20% larger. This displaces the point under the cursor by 20% downward and to the right. Meanwhile, the cursor is in the same position.

为了补偿光标下点的位移，我们移动图像，使点回到光标下.点向下向右移动；我们将图像向上和向左移动相同的距离.

To compensate for the displacement of the point under the cursor, we move the image so that the point gets back under the cursor. The point moved down and right; we move the image up and left by the same distance.

注意图像可能在缩放操作之前已经在画布中移动了，所以缩放前光标在图像中的水平位置是currentMouseX - image.getLeft()，垂直方向也是如此位置.

Note that the image might have been moved in the canvas before the zooming operation, so the cursor's horizontal position in the image is currentMouseX - image.getLeft() before zooming, and likewise for the vertical position.

这是我们如何计算缩放后的位移:

This is how we calculate the displacement after zooming:

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

最后，我们通过将点移回光标下方来补偿位移:

Finally, we compensate for the displacement by moving the point back under the cursor:

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

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

I integrated this calculation into your demo and made the following fiddle:

https://jsfiddle.net/fgLmyxw4/

我也实现了缩小操作.

这篇关于以鼠标位置为中心的图像缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！