FabricJS - 如何讓Delta變革？

Question

有沒有辦法通過使用本地函數或屬性來獲得FabricJS中上一次移動的增量/距離？假設，當前座標是100x100。 現在我移動一個元素，它的新座標是90x120。 因此，增量爲-10x20，這就是我需要使用FabricJS函數或原生js代碼。

任何想法？ TNX

Answer 1

var canvas = new fabric.Canvas('c'); 
 
var rect = new fabric.Rect({ 
 
    left: 50, 
 
    top: 60, 
 
    fill: 'blue', 
 
    width: 150, 
 
    height: 150, 
 
}); 
 
canvas.add(rect); 
 
rect.on('mousedown', rectMouseDown); 
 
rect.on('mouseup', rectMouseUp); 
 

 
function rectMouseDown(){ 
 
this.origPos = this.getCenterPoint(); 
 
} 
 

 
function rectMouseUp(){ 
 
delta = this.getCenterPoint().subtract(this.origPos); 
 
console.log(delta.x,delta.y) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script> 
 
<canvas id="c" width="400" height="400"></canvas>

上按下鼠標和鼠標了對對象，採取使用getCenterPoint()中心點座標，並得到增量使用subtract。