javascript - Fabric.js - 在不按住鼠标按钮的情况下移动对象

Question

在 Fabric.js 中，可以通过左键单击、按住并移动鼠标在 Canvas 中移动对象。在这种情况下，选定的对象跟随鼠标的光标并且 object:moving 被触发。释放鼠标左键退出此模式。

有没有办法改变这种行为，让一个对象通过不同的事件进入这种模式？例如，单击一次使对象跟随光标(并使 object:moving 正确触发)，然后单击第二次以在最终位置释放对象？

鉴于这已经实现，我希望避免从头开始编写这个监听“鼠标移动”事件，但只需更改进入/退出此模式的触发器。

Answer 1

通过 Fabric.js 代码，对象被标记为要移动的位置在 canvas.__on_mouse_down(e) 中调用 canvas._setupCurrentTransform(e, target) (仅在使用此方法的地方)。这将构造一个对象并将其分配给 canvas._currentTransform。该对象又在 canvas.__onMouseMove(e) 中使用，以使用 canvas._transformObject(e) 实际移动所选对象。

问题是 canvas.__onMouseUp(e) 调用了 canvas._finalizeCurrentTransform()，所以拖动停在那里。幸运的是，它也会在之后立即触发“mouse:up”。所以我们可以在回调中覆盖它:

var mydragging = false;
canvas.on('mouse:up', function(o) {
  if (mydragging) {
    mydragging = false;
    canvas.currentTransform = null;
  }
  else {
    canvas._setupCurrentTransform(o.e, o.target);
    mydragging = true;
  }
});

这会将 canvas 置于与按住鼠标按钮拖动时完全相同的状态(在引入此代码之前)，因此所有内置行为都保持不变，包括触发“对象” :移动”。

不幸的是，canvas._currentTransform 和 canvas._setupCurrentTransform 被标记为私有(private)，不能依赖。也许他们愿意公开。