Fabricjs:在拖动时显示水平和垂直位置线

Question

我正在使用fabricjs 1.5，但我被困住了。每当我开始拖动对象时，我想水平和垂直显示虚线。这些行的目的是让用户了解对象相对于画布和其他对象的位置。 我在许多网站上搜索过，找不到任何解决方案，甚至找不到与此问题相关的任何参考资料，因此我无法开始任何事情。

如果有人能把我放在正确的方向上，那将是很大的帮助。谢谢。

Answer 1

centering_guidelines，您可以使用此库绘制中心线。 aligning_guidelines用于在对象之间绘制线条。

演示

var canvas = new fabric.Canvas('canvas');
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'green',
originX:'center',
originY:'center',
left:canvas.width/2,
top:canvas.height/2,
});
var rect2 = new fabric.Rect({
width: 100,
height: 100,
fill: 'green',
originX:'center',
originY:'center',
left:canvas.width/2,
top:canvas.height/2,
});
canvas.add(rect,rect2);

canvas {
border: 1px solid #999;
margin-top: 10px;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 2

我找到了一个库，它为我们指明了正确的方向。您可以调整代码以在此处准确获得所需的内容。它帮助了我，几乎解决了我正在寻找的东西。

如果其他人最终回答我的问题，我会发布答案。

https://github.com/fabricjs/fabric.js/blob/master/lib/aligning_guidelines.js

希望它对某人有所帮助。