fabric.js 以编程方式停止对象拖动答案

【问题标题】：fabric.js Stop object dragging programmaticallyfabric.js 以编程方式停止对象拖动
【发布时间】：2022-02-04 22:34:29
【问题描述】：

在某些条件下，在我的 mouse:down 事件侦听器中，我想停用用户刚刚使用 mouse:down 激活的对象。换句话说，当用户在某些情况下尝试拖动对象时，我想执行一些代码并阻止拖动。

简单调用

fabric.deactivateAll();

将取消选择对象（对象控件消失），但拖动功能将不会中断。

我尝试过：

fabric.fire('mouse:up');

模拟用户放开对象并触发但对拖动没有影响。

如何以编程方式禁用拖动？另外，如果两种方法不同，我将如何在另一个对象上激活它？

上下文：我有一组用户可以正常操作的对象。但是，该组中有一个特殊对象，当用户尝试通过单击该特殊对象进行拖动时，应将其从组中删除，添加到画布中，并且应将拖动应用于特殊对象而不是整个组。取消选择特殊对象后，它会再次添加到组中。除了拖动功能从整个组转移到特殊对象的部分之外，我一切正常。

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

我制作了一个JSFiddle，其中拖动的对象在 500 毫秒后停止。您可以设置rect.lockMovementX = true;和rect.lockMovementY = true;停止拖动，设置为false允许再次拖动。

关于您只需要将其应用于某些对象：只需添加一个 stopDragging 变量，对于您想要停止拖动的对象，它的值为 true，对于您不想停止拖动的对象，它的值为 false。然后在onMoving函数中检查e.target.stopDragging是真还是假。

(function() {
  var canvas = new fabric.Canvas("canvas");
  fabric.Object.prototype.transparentCorners = false;

  var rect = new fabric.Rect({
    width: 100,
    height: 100,
    top: 100,
    left: 100,
    fill: 'rgba(255,0,0,0.5)'
  });

  canvas.add(rect);

  var timeoutTriggered = false;

  function stopDragging(element) {
    element.lockMovementX = true;
    element.lockMovementY = true;
  }

  function onMoving(e) {
    if (!timeoutTriggered) {
      setTimeout(function() {
        stopDragging(e.target);
      }, 500);
      timeoutTriggered = true;
    }
  }
  canvas.on({
    'object:moving': onMoving
  });
})();

【讨论】：

element.lockMovementX = true; element.lockMovementY = true; 。工作得很好！
@leroydev，感谢您的解决方案。但是，这似乎不适用于图像。有什么建议吗？

【解决方案2】：

我一直在寻找相同的解决方案。我与一个 fabricjs 开发人员讨论过，这将导致智能手机上的用户体验不佳。

相反，我现在做动画，块将自身移回有效位置。

【讨论】：