按扣形状以FabricJS为中心

Question

我在canva的中心创建了一条垂直线，我希望我的形状可以沿着它的中心对齐，当它接近它时就在线上（用户可以拿它如果他不想对齐）。

我和我的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/。