通过HTML5 JS实现CAD在线看图,CAD浏览器,HTML5画布和Javascript /浏览器开发的性能限制...

有用的工具

它使您能够阻止paper.js重新绘制每一帧(使用paper.view.persistence = 1;)。

这样，您可以更好地控制要清除的内容并重新绘制：例如，当您移动形状时，可以清除该区域(例如使用本机画布drawRect)，

并在移动后更新它(使用path.needsUpdate();)。

退税

形状相交时出现问题。如果要修改与另一个相交的形状，则必须更新两者。同样的事情，如果第二个形状相交第三个，所以一个等等。

所以你需要一个递归函数，而不是很难编码，但如果有许多复杂形状相交，那么它可能是昂贵的，所以在这种情况下你可能不会获得性能。

(更新)位图缓存

每个形状一个画布

一个替代方案是在单独的画布上绘制每个形状(以层为单位)。这样，您可以独立自由地清除和重绘每个形状。您可以分离未更改的视图的onFrame事件(除了用户正在使用的视图之外的所有画布)。这应该更容易，但它会导致其他小问题，例如共享相同的项目视图参数(在缩放的情况下)，并且它可能是昂贵的许多形状(这意味着许多画布)。

静态和动态画布

(可能)更好的方法是只有两个画布，一个用于静态形状，一个用于活动形状。静态形状画布将包含所有形状(期望正在编辑的形状)，并且将在用户开始和停止编辑活动形状时重新绘制。当用户开始编辑形状时，它将从静态画布传输到动态画布，而另一种方式在用户停止时。