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

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