如何以最佳效率重新定位 paperjs 中的路径线？

Question

关于 线重新定位 和 Paper.js 的快速问题。我开始尝试使用这个库，我发现它对于小型动画非常有趣，但有时文档并不是最好的。不管怎样，我的目标是移动一条线。

这是我创建它的代码

a_lines[(i -1) / 2].line = new Path.Line({
    from: a_lines[(i -1) / 2].start,
    to: a_lines[(i -1) / 2].end,
    strokeColor: '#282828'
});

这是我发明的用来移动它的：

a_lines[(i -1) / 2].line.removeSegment(0);
a_lines[(i -1) / 2].line.add(a_lines[(i -1) / 2].start);
a_lines[(i -1) / 2].line.removeSegment(0);
a_lines[(i -1) / 2].line.add(a_lines[(i -1) / 2].end);

它工作正常，但我想问我是否真的需要使用四个命令行来执行此操作。目前是我找到的最佳解决方案。但是有更好更有效的解决方案吗？非常感谢。

Answer 1

您的解决方案方向正确；删除一条线并重新创建它比仅仅操纵线段点要慢。但是你可以通过仅仅改变现有的段点来做得更好。

line = a_lines[(i - 1) / 2].line;
line.segments[0].point = newStartPoint;    // repositioning as you like
line.segments[1].point = newEndPoint;      // ditto

这是一个简单的草图，显示它在没有任何无关代码的情况下工作：

Segment Point manipulation sketch

Slightly modified Segment Point manipulation sketch

如何以最佳效率重新定位 paperjs 中的路径线？

How to reposition a Path Line in paperjs with best efficiency?

performance

animation

canvas

line

paperjs