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

【问题标题】：How to reposition a Path Line in paperjs with best efficiency?如何以最佳效率重新定位 paperjs 中的路径线？
【发布时间】：2023-03-16 07:15:02
【问题描述】：

关于使用 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);

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

【问题讨论】：

标签： performance animation canvas line paperjs

【解决方案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

【讨论】：