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

Posted 2023-03-25

【中文标题】Fabricjs：在拖动时显示水平和垂直位置线

【英文标题】：Fabricjs: Show horizontal and vertical position line on drag

【发布时间】：2018-12-13 12:37:24

【问题描述】：

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

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

【参考方案1】：

centering_guidelines，你可以使用这个库来绘制中心线。 aligning_guidelines this 用于在对象之间画线。

演示

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"  ></canvas>

【讨论】：

它没有用。我发现一个库不是我想要的，但至少 80-90% 解决了我的问题。我将 URL 放在这里，以防有人最终为同一问题寻找解决方案。去这里 - github.com/fabricjs/fabric.js/blob/master/lib/…

@Ashish，添加了他们添加的另一个库，查看演示。他们使用了相同的函数名，因此可能会发生冲突。您可以根据自己的使用情况进行更改。

感谢大家提供有用的解决方案。

【参考方案2】：

我找到了一个图书馆，它为我们指明了正确的方向。您可以调整代码以获得您在此处寻找的内容。它帮助了我并修复了几乎我正在寻找的东西。

如果其他人回答了我的问题，我将发布答案。

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

希望对某人有所帮助。

【讨论】：

刚试过这个库。 aligning_guidelines 对我来说似乎更好。它提供了适当的水平和垂直线 w.r.t.其他对象

github.com/fabricjs/fabric.js/blob/master/lib/… 如果我们放大-缩小画布，URL 将不起作用。有没有人可以帮我解决这个问题？