仅在paper.js中重新渲染一层

Question

是否有一种方法可以在paper.js中重新渲染单个图层？我知道您可以重新渲染整个场景，但是具有数千种形状的画布将始终影响性能，因此仅在图层上进行渲染是理想的。

Answer 1

不幸的是，没有办法做到这一点。

我建议您使用位图缓存：将所有形状（图层）保存在栅格中，然后绘制此栅格而不是图层（仅隐藏图层）。如果形状发生任何变化，则必须删除栅格并重新绘制所有内容。

对于真正特殊的情况，可能还有其他方法可以实现此目的。

另一种方法是使用webgl进行渲染，但是在webgl中绘制粗线非常复杂。

Answer 2

您可以模拟将每个图层模拟为不同的PaperScope。

由于每个PaperScope都与特定的<canvas>元素相关联，因此更改一个范围（在您的情况下为图层）将仅导致其相应的画布被更新。

请记住，如果您最终遵循此方法，则必须先手动paperScope.activate()使用范围，因为paperJS在范围激活方面趋于“神奇”。

Answer 3

您可以将不想渲染的图层上的可见参数设置为false。然后draw（）并将visible设置回true。它大大提高了性能！ ;-）

var tNow=(new Date()).getTime();

paper.project.layers[1].visible =false;
paper.view.draw();
paper.project.layers[1].visible = true;

console.log('Rendertime: '+((new Date()).getTime()-tNow));