我正在使用fabric.js创建画布项目。我已经使用框架创建了一行。但是，有一种方法可以在线路上设置固定长度。原因是，该线是可拖动的并且会延伸。
line = makeLine（[250，125，250，175]），
评论变得非常复杂，所以我们总结一下：
这是简单情况的解决方案：
在您的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。
通过这种方法，当您尝试移动膝盖时，您的骨盆-膝盖线将随鼠标移动，但要保持其长度（如您所愿）。但是在膝盖运动期间，腿的其余部分将以相同的量运动，因此实际上，您还将保持膝盖-踝关节线的长度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句