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

Ash*_*ish 2 javascript canvas fabricjs angularjs

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

如果有人能让我朝着正确的方向前进,那将是非常有帮助的。谢谢。

Dur*_*rga 5

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);
Run Code Online (Sandbox Code Playgroud)
canvas {
  border: 1px solid #999;
  margin-top: 10px;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)