Question

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

只需致电

fabric.deactivateAll();

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

我试图：

fabric.fire('mouse:up');

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

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

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

Answer 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
  });
})();

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

1 个答案: