如何通過FabricJS中的邊界框對齊對象？

Question

想知道是否有一種方法可以通過FabricJ的邊界框對齊對象？

我使用obj.getBoundingRect（）函數確定對象的邊界，然后將它們與活動對象（我移動的那個）的邊界框（BB）坐標進行比較。 如果我發現某些間隙（例如10px）之間存在間隙，則可以使用.setTop（）屬性將活動對象頂部分配為與可比較元素相同的頂部。

問題在於，TOP不是正確的屬性，因為邊界框的頂部在元素之間可能有所不同。 例如，頂部相同但角度不同的2個元素將具有不同的邊界框頂部...

希望你明白我的意思...

https://jsfiddle.net/redlive/hwcu1p4f/

 var canvas = this.__canvas = new fabric.Canvas('canvas'); //fabric.Object.prototype.transparentCorners = false; var red = new fabric.Rect({ id: 1, left: 100, top: 50, width: 100, height: 100, fill: 'red', angle: 0, padding: 10 }); canvas.add(red); var green = new fabric.Rect({ id: 2, left: 250, top: 180, width: 100, height: 100, fill: 'green', angle: 45, padding: 10 }); canvas.add(green); canvas.renderAll(); canvas.on("object:moving", function(e){ const draggableObj = e.target; const draggableObjBound = draggableObj.getBoundingRect(); canvas.forEachObject(function(obj) { if (obj.id !== draggableObj.id) { var bound = obj.getBoundingRect(); if (draggableObjBound.top > bound.top - 10 && draggableObjBound.top < bound.top + 10) { draggableObj.setTop(obj.getTop()); } } }); }); canvas.forEachObject(function(obj) { var setCoords = obj.setCoords.bind(obj); obj.on({ moving: setCoords, scaling: setCoords, rotating: setCoords }); }); canvas.on('after:render', function() { canvas.contextContainer.strokeStyle = '#555'; canvas.forEachObject(function(obj) { var bound = obj.getBoundingRect(); canvas.contextContainer.strokeRect( bound.left, bound.top, bound.width, bound.height ); }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script> <canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas> 

Answer 1

您應該使用中心對齊它們，這不會改變。

例如，將邊界框對准左側5：

1）計算邊界框。 2）考慮到中心，將對象的位置設置為5 + bb.width / 2。

在這種情況下，邊界矩形將對齊。

 var canvas = this.__canvas = new fabric.Canvas('canvas'); //fabric.Object.prototype.transparentCorners = false; var red = new fabric.Rect({ id: 1, left: 100, top: 50, width: 100, height: 100, fill: 'red', angle: 0, padding: 10 }); canvas.add(red); var green = new fabric.Rect({ id: 2, left: 250, top: 180, width: 100, height: 100, fill: 'green', angle: 45, padding: 10 }); canvas.add(green); //ALIGN EVERYTHING TO 5 canvas.forEachObject(function(object) { var bb = object.getBoundingRect(); object.setPositionByOrigin({ x: 5 + bb.width/2, y: bb.top }, 'center', 'center'); object.setCoords(); }); canvas.renderAll(); canvas.on("object:moving", function(e){ const draggableObj = e.target; const draggableObjBound = draggableObj.getBoundingRect(true, true); canvas.forEachObject(function(obj) { if (obj.id !== draggableObj.id) { var bound = obj.getBoundingRect(true, true); if (draggableObjBound.top > bound.top - 10 && draggableObjBound.top < bound.top + 10) { draggableObj.setPositionByOrigin({ x: draggableObj.left, y: bound.top + draggableObjBound.height/2 }, draggableObj.originX, 'center'); } } }); }); canvas.forEachObject(function(obj) { var setCoords = obj.setCoords.bind(obj); obj.on({ moving: setCoords, scaling: setCoords, rotating: setCoords }); }); canvas.on('after:render', function() { canvas.contextContainer.strokeStyle = '#555'; canvas.forEachObject(function(obj) { var bound = obj.getBoundingRect(true, true); canvas.contextContainer.strokeRect( bound.left, bound.top, bound.width, bound.height ); }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script> <canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>