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

Question

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

我被侥幸发现的奇怪部分。似乎当我注释掉objectsObject变量的声明（跟踪我想要移动的东西）时，缩放功能运行良好，但是平移仍然是一个问题。但同样奇怪的是，即使我得到异常，它也能正确缩放。 See this codepen.评论并取消注释第51行以查看行为。每次选择圆圈，然后用鼠标滚轮放大。我有来自the Fabric.js tutorial on Zoom and Pan的缩放代码（即使我不能在我的生活中得到该页面上的最后一个例子，在我的代码版本中没有毛刺......）

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

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

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

另外，我有一个网格，我希望能够将圆圈捕捉到。如果我的鼠标：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;

Answer 1

我只是在我的鼠标中迭代了所有可能的鼠标位置选项：移动功能，直到找到有用的东西。我本来可以发誓我以前没有运气就尝试了所有选项，所以我开始保留一份结果列表，即

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

现在无论缩放因子还是平移值，该部分都会像我想要的那样粘在鼠标指针上。