performance - 如何以最佳效率在paperjs中重新定位路径线?

标签 performance animation canvas line paperjs

关于 的快速问题线路重新定位使用 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);

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

最佳答案

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

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

关于performance - 如何以最佳效率在paperjs中重新定位路径线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35074268/

相关文章:

javascript - Canvas 仅显示在 slider 的第一个图像上或连接到每个图像的底部

javascript - KonvaJS - 在图像的鼠标打开/鼠标关闭时切换 anchor

java - java直接内存访问网卡

c# - 如何提高性能 EF Linq to Entities

IOS - 按钮从右侧动画滑入

android - Flutter:如何在触发转换之前为小部件设置动画?

.net - DataView.RowFilter 与 DataTable.Select() 与 DataTable.Rows.Find()

sql - MSSQL中CTE、临时表和表变量的区别

javascript - 如何在没有 JavaScript 的情况下停止 CSS 动画

javascript - 你能用 HTML5 <canvas> 做等距透视吗?