使用 Fabric.js 中的自定义对象选择功能进行缩放和平移时鼠标偏移的奇怪问题答案

【问题标题】：Strange Issue with mouse offset when zooming and panning using custom object select function in Fabric.js使用 Fabric.js 中的自定义对象选择功能进行缩放和平移时鼠标偏移的奇怪问题
【发布时间】：2019-08-08 06:33:00
【问题描述】：

我正在尝试获取它，以便可以通过单击鼠标选择画布上的圆圈。然后用户不必按住鼠标移动对象。当我尝试缩放或平移时会出现问题。出于某种原因，圆圈似乎重置为画布的中心，而不是跟随鼠标。然后鼠标和圆圈有很大的偏移。因此，我无法取消选择圆圈，或者如果可以，手柄不在我认为它们应该在逻辑上的位置。我从这里提到的代码开始：https://stackoverflow.com/a/35014746/1053106

我偶然发现的奇怪部分。似乎当我注释掉movedObject变量的声明（跟踪我想要移动的内容）时，缩放功能运行良好，但平移仍然是一个问题。但同样奇怪的是，即使我遇到异常，它也能正确缩放。 See this codepen. 注释并取消注释第 51 行以查看行为。每次选择圆圈，然后用鼠标滚轮放大。我有来自the Fabric.js tutorial on Zoom and Pan 的缩放代码（即使我一生都无法让该页面上的最后一个示例在我的代码版本中没有故障的情况下工作......）

在取消注释该行的情况下，您可以在画布上按住 Alt 和 mouseDown 进行平移，直到圆与光标对齐，如果圆与鼠标位置偏移太大，则取消选择它。
注释行后，缩放工作正常，但平移仍会破坏选择手柄您必须在画布周围寻找手柄。

下面是我自己展示缩放的示例。首先，我没有声明movedObject，并且缩放使鼠标和圆圈保持对齐。然后我声明该变量，当我缩放和移动鼠标时，圆圈似乎重置到画布的中心，使其与鼠标不匹配。我有一个脚本正在运行以显示鼠标点击。

Here's my example showing panning 声明和不声明该变量。 GIF 太大而无法嵌入，因此需要链接。

此外，我有一个网格，我希望能够将圆圈捕捉到。如果我的 mouse:move 中有任何代码可以让它快速移动，这似乎也会变得很奇怪。第 147 和 148 行类似于：

movedObject.left=Math.round((opt.e.clientX -( movedObject.width/2) )/ grid) * grid /zoom;
movedObject.top = Math.round((opt.e.clientY - (movedObject.height/2) )/ grid) * grid/zoom;

【问题讨论】：

标签： canvas fabricjs zooming selected panning

【解决方案1】：

我只是在我的 mouse:move 函数中遍历了所有可能的鼠标位置选项，直到找到可行的方法。我本可以发誓我之前尝试过所有选项都没有运气，所以我开始保留结果列表，即

pointer.x pointer.y = No Joy  
options.e.layerX and options.e.layerY  = No Joy 
canvas._offset.left, canvas._offset.top   = No Joy 
options.clientX,  options.clientY  = No Joy

在尝试了各种不起作用的指针位置选项后，我相信我找到了答案。解决方法是在计算中使用absolutePosition.x和absolutePosition.y。

movedObject.left= (Math.round((options.absolutePointer.x - movedObject.width / 2) / grid) * grid);
movedObject.top = (Math.round((options.absolutePointer.y - movedObject.height / 2)/ grid) * grid);

现在无论缩放系数或平移值如何，部件都会像我想要的那样粘在鼠标指针上。

【讨论】：