结构.js以编程方式停止对象拖动

fabric.js Stop object dragging programmatically

本文关键字：对象 拖动 方式停 编程 js 结构      更新时间：2023-09-26

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

只需调用

fabric.deactivateAll();

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

我尝试：

fabric.fire('mouse:up');

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

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

 

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

我制作了一个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
  });
})();

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

相反，我现在确实制作了动画，因为块将自己移回有效位置。

相关文章：