fabric.js以編程方式拖動停止對象

Question

在我的鼠標中：在特定條件下關閉事件偵聽器我想停用剛用鼠標激活的對象：down。換句話說，當用戶在某些情況下試圖拖動一個對象時，我想執行一些代碼並阻止拖動。

簡單地調用

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