javascript - 在 PaperJS 中是否可以明确设置直线路径的长度？

Question

据我所知，更改单个路径长度的唯一方法似乎是path.scale(x)。然而，我想让线的长度围绕其原始长度略微振荡，这很难用 scale 来实现，因为如果你给它随机值，你实际上会以它的长度随机游走而告终，最终可能会远离其原始长度。

是否可以显式设置线路径的长度，比如path.length = 10？根据文档，这似乎是不可能的。为什么不？？实现我想要的结果的最佳方式是什么？

Answer 1

您可以通过注意 paperjs 中的路径不是几何形状来做到这一点，尽管它们可能已被指定为一个。它们是分段点的数组；这就是为什么不能直接设置线的长度的原因。一条线有两个线段点 - 一个是线的起点，一个是线的终点。通过操纵第二个线段点，您可以调整线的长度。这sketch (以下代码)说明了如何执行此操作。要调整原始行的长度，请取消注释最后一行代码。

line = new Path.Line([100,100], [200, 300]);
line.strokeColor = 'black';
line.strokeWidth = 5;

// paths in paper are arrays of segments, not instances of
// circle or line or rectangle. so find the vector that
// represents the delta between the first point and the
// second point.
vector = line.segments[0].point - line.segments[1].point;

// adjustment for the line - this would vary in your case
factor = 0.9;

// I'm drawing a new line here to make it easy to see
p0 = line.segments[0].point;
p1 = p0 - vector * factor;

newline = new Path.Line(p0, p1);
newline.strokeColor = 'red';
newline.strokeWidth = 2;

// but to adjust your original line just use the following
//line.segments[1].point = p1;

如果您选择这样做，您可以将原始矢量存储在属性 line.data 中，这是一个空对象，纸张可以根据用户的需要创建该对象。所以 line.data.vector = vector; 将允许您保留每一行的原始向量。您可以使用以下命令将行的长度设置为特定长度:

var v = line.data.vector.clone();
v.length = 10;         // specific length
line.segments[1].point = p0 - v;