"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 開發人員討論過，這將導致智能手機上的用戶體驗不佳。

相反，我現在做動畫，塊移動自己回到一個有效的位置。