css - 使用 fabric.js 和 canvas 在 Line 上设置固定高度

Question

我正在使用 fabric.js 创建 Canvas 元素。我使用框架创建了一条线。但是，有没有办法在线路上设置一个固定的长度。原因是，这条线是可拖动的并且可以延伸。

line = makeLine([ 250, 125, 250, 175 ]),

Answer 1

评论中的内容变得相当复杂，所以让我们总结一下:

下面是简单案例的解决方案:

在你的http://jsfiddle.net/sprakashg/rbhhP/你有几行是这样的:

var p = e.target;
p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });

这里，line1 是您的直线，p 是您的圆。

您可以计算线的初始长度并将其存储。接下来，您可以计算当前行方向，即从 line.p1 到 position of p。现在，如果您将此方向归一化并乘以初始线长，您将得到新方向，指向您的圆，但保持初始线长。将它添加到您的行首，您可以将此值存储在 p.line1.set() 中。

如果您有两个圆圈与一条线相连，这会起作用，但如果您有几条线连接到一个圆圈，那么您将无法移动它。

更复杂情况的解决方案:

在您的 Stickman 案例中，您不能移动膝盖，因为只有一个点可以满足您的线条长度限制。在这种情况下，我会向模型添加一个简单的层次结构。

如果您假设某个 Circle 是模型的根，那么所有其他对象都是某个模型树的叶子和分支。现在，当你移动一些圆圈时，你应该只对连接它与 parent 的线进行上述计算。

然后，您可以在模型层次结构中获取下面的所有圆圈，并将它们移动与移动主 Circle 相同的量。

通过这种方法，当您尝试移动膝盖时，您的骨盆-膝盖线将随鼠标一起移动，但会保持其长度(如您所愿)。但在膝盖运动期间，腿的其余部分会移动相同的量，因此实际上您也将保持膝踝线的长度。