FabricJSを中心にスナップする形状

Question

私のキャンバの中央に垂直線を作成しました。私はその形状を中心に水平に整列させていきます。もし彼が整列したくないならば）。

私は私のJSFiddleに問題を抱えている：https://jsfiddle.net/z0u05hee/5/

問題は形状が移動したとき、それはラインの中央付近に遮断したままで、私はもうそれを得ることができないということです。ここで

は私FabricJSコードです：

var canvas = new fabric.Canvas('c', { selection: false }); 

var line9 = new fabric.Line([ 
    canvas.width/2, 0, 
    canvas.width/2, canvas.width 
],{ 
    stroke: 'green', 
}) 

line9.selectable = false; 
line9.evented = false; 
canvas.add(line9); 

canvas.add(new fabric.Circle({ 
    left: 10, 
    top: 100, 
    radius: 50, 
    fill: '#9f9', 
    originX: 'left', 
    originY: 'top', 
    centeredRotation: true 
})); 

canvas.on('object:moving', function(options) { 
    if (Math.round(options.target.left) < (canvas.width/2) - 15 || 
    Math.round(options.target.left) > (canvas.width/2) + 15) { 
     options.target.set({ 
     left: Math.round(canvas.width/2), 
     }).setCoords(); 
    } 
}); 

どのように私は私のコードを修正する必要がありますか？

---

UPDATE：

canvas.on('object:moving', function(options) { 
    if (Math.round(options.target.left) >= (canvas.getActiveObject().getWidth()) - 20 && Math.round(options.target.left) <= (canvas.getActiveObject().getWidth()) + 20) { 
     options.target.set({ 
     left: (canvas.width/2) - canvas.getActiveObject().getWidth()/2, 
     }).setCoords(); 
    } 
}); 

これは動作しますが、私は形状の中心点の変更をスケーリングするときには、コーディネートです。

Answer 1

私が正しくあなたを理解している場合、これはそれを行う必要があります。

そして、あなたのコード（関連部分）に小さな微調整：

var snapZone = 15; 
canvas.on('object:moving', function(options) { 
    var objectMiddle = options.target.left + options.target.getWidth()/2; 
    if (objectMiddle > canvas.width/2 - snapZone && 
    objectMiddle < canvas.width/2 + snapZone) { 
    options.target.set({ 
     left: canvas.width/2 - options.target.getWidth()/2, 
    }).setCoords(); 
    } 
}); 

そして、すべての重要なJSFiddle更新、 https://jsfiddle.net/rekrah/9k9hd49u/。