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

Question

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

只需调用

fabric.deactivateAll();

Answer 1

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

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

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

Answer 2

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

相反，我现在做动画，块移动自己回到一个有效的位置。