FabricJS - 更好的解決方案，選中時在光標上居中對象？

Question

我希望可選對象在點擊時將其中心捕捉到我的鼠標光標。在這種情況下，對用戶的唯一修改是移動對象，不進行縮放，旋轉等。只需更新mousedown或selected上對象的位置，將只更新其位置，直到moving事件被觸發，對象將在其中到原來的位置，然後開始跟隨鼠標。

rect.on('moving', moveHandler); 
function moveHandler(evt) { 
var mousePnt = $canvas.getPointer(evt.e); 
rect.set({ 
    left:mousePnt.x - rect.width*0.5 , top:mousePnt.y - rect.height*0.5}); 
this.setCoords(); 
} 

這是我想出居中光標可選擇的長方形，但我敢肯定它發射了兩枚運動事件。有沒有辦法來覆蓋原來的定位。或者我應該自己編寫mousedown,mouseup和moving偵聽器來模仿默認的拖動行爲？

Answer 1

如果不涉及旋轉或縮放，則您的解決方案很好。

如果不是.setCoords，在移動過程中是可選的，因爲它將在翻譯完成時在mouseUp上調用時，您不會執行任何超出必要的任何操作。

如果你想利用鼠標按下的辦法，改變位置一勞永逸，你可以用這樣的邏輯：

var canvas = new fabric.Canvas('c'); 
 
canvas.add(new fabric.Rect({width: 50, height: 50})); 
 
canvas.on('mouse:down', function(opt) { 
 
    if (this._currentTransform && opt.target) { 
 
    var target = opt.target; 
 
    target.top = this._currentTransform.ey - target.height/2; 
 
    target.left = this._currentTransform.ex - target.width/2; 
 
    this._currentTransform.left = target.left; 
 
    this._currentTransform.offsetX = this._currentTransform.ex - target.left; 
 
    this._currentTransform.offsetY = this._currentTransform.ey - target.top; 
 
    this._currentTransform.top = target.top; 
 
    this._currentTransform.original.left = target.left; 
 
    this._currentTransform.original.top = target.top; 
 
    this.renderAll(); 
 
    } 
 
})

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

您必須修改所有的面料注意變換信息在你的mousedown處理程序執行之前，先關閉mouseDown事件。