我目前正在使用 Paper.js 开发个人项目，我注意到在使用project.view.update()每次添加后尝试更新视图时，添加超过100个元素会造成巨大延迟
我创建了一个简单的例子来证明这种行为。此示例自动创建200个元素（每10毫秒一个），每个元素有5个随机段。
您可以尝试 here 。
看看控制台。一开始，一切都很好，但是第100个元素（或多或少）开始变得迟钝。
对于此问题，Paper.js库是否有任何解决方案或改进？这对于绘制应用程序来说是个大问题，需要在用户绘制元素时不断更新。
提前致谢！
PS：我也报告为an issue on Github，但没有人回答我。
PS：我创建了这个 fiddle ，并将最大元素从100更改为2000.如果您看到在200或350个元素后更新计数消息，您会发现问题
答案 0 :(得分：1)
Paper.js（以及大多数情况下）Canvas包装器库在更改内容时重绘整个场景。换句话说，即使是最微小的变化也会触发全景更新。
重绘周期是所有矢量图形库中固有的，甚至SVG图形都会这样做，但是浏览器会抽象重绘循环（加上其他一些重绘优化）。
所以在每个帧上你基本上都是重绘整个场景。每次重绘都需要在画布上显示100个或更多的矢量项。这是经济放缓的主要原因。
由于每个矢量项都包含段，填充等 - 因此速度会减慢。
你可以通过这样做来解决这个问题：
var tempRaster = myItem.rasterize();
myItem.visible = false;
我在这里使用item.visible = false;代替item.remove()以保留场景图中的矢量项，以防您想要在某个时刻将其恢复（更改它的属性或使用它作为向量 - 无论你是不是丢失了矢量项本身。）
上述技术类似于Bitmap Caching
如果您打算仅使用线条（如上图所示），这可能没有任何实际好处。当您具有由许多段组成的复杂矢量路径时，这通常是一个很好的解决方案。
如果您的商品与其定位完全相同，您可能还需要查看Using Symbols in Paper.js
如果您只是在画布上绘制您之后不想操作的形状，只需使用普通的HTML，例如ctx.lineTo(300,150);等。
＆＃39;定期＆＃39;没有Vector包装器库（如Paper.js）的Canvas速度要快得多，因为它可以防万一。你只是在画布上画出形状并且全部 - 在绘制之后形状被遗忘，没有涉及重绘循环（除非你自己创建一个）所以一切都要快得多。