Question

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

有没有办法更改此行为并让对象进入具有不同事件的此模式？例如，单击一次以使对象跟随光标（并正确地激活object:moving），然后再次单击以释放其中的对象的最终位置？

我希望避免从头开始听这个＆＃34;鼠标移动＆＃34;事件，鉴于这已经实现，但只需要更改进入/存在此模式的触发器。

Answer 1

我通过一个名为movedObject的变量来实现这一点，如果没有移动对象则为null，如果移动了对象，则包含一个对象。如果您在移动对象时单击，则会将movedObject设置为null。如果您在不移动对象的情况下单击，则会将movedObject设置为对象如果您单击了一个对象。

我向mouse:move添加了一个监听器，将left和top movedObject设置为鼠标x和y（减去{{ 1}} movedObject和width / 2）如果 height不是movedObject。

JSFiddle

代码：

null

Answer 2

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

问题是canvas.__onMouseUp(e)调用canvas._finalizeCurrentTransform()，因此拖动就会停止。幸运的是，它也会触发＆＃34;鼠标：up＆＃34;之后。所以我们可以在回调中覆盖它：

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处于与拖动时完全相同的状态，方法是按住鼠标按钮（在引入此代码之前），因此所有内置行为都保持不变，包括触发＆＃34;对象：移动＆＃34;

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

Fabric.js - 不按住鼠标按钮移动对象

2 个答案: