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。