javascript – HTML5 Canvas重绘循环性能优化

我们正在构建一个在浏览器中运行的CAD应用程序.

> C.A.D代表Computer Aided Design.
> Illustrator,CorelDraw,AutoCAD等是CAD应用程序的一些示例.

它基于Paper.js,一个非常简洁的Canvas库,允许您以编程方式操作矢量.

问题

我目前面临的主要问题是重绘循环性能.

重绘算法是“哑”(就聪明的黑客而言,以提高性能)因而效率低且速度慢 – 渲染场景图项依赖于逐渐减慢的重绘周期.

随着绘图点的累积,每个重绘周期变得越来越慢.

重绘方案非常简单：

>清除整个区域
>从场景图中获取所有项目
>重绘所有项目.

这个问题

在这种情况下是否有任何课堂示例进行渲染优化 – 假设我不想实现脏矩形算法(仅绘制已更改的区域)

编辑：我已经尝试过手动的现场光栅化,效果非常好,我在下面发布了一个答案.

解决方法:

这可以通过类似于Bitmap Caching的过程/技术中的光栅化来完成.

高节点数场景图的问题在于渲染它们会导致渲染引擎呻吟.浏览器必须遍历其节点并在画布上渲染其像素.

所以这是一个很好的解决方案：

1.渲染位图,但保持原始形状,隐藏

The solution is to replace the vectors with images, rasterizing them –
only when rendering, but still keeping the original shape below it’s
image copy, in a hidden state only when inactive(not being currently
manipulated).

单击图像 – 我们将其删除并切换原始形状的可见性.这样,非活动形状将呈现为图像,活动形状从其位图表示中释放出来并充当矢量,可以自由地进行操作.当它们不活跃时,它们只是坐在那里无法使用它们上面的光栅副本.

这允许引擎保持形状的矢量表示,但避免将它们渲染为矢量 – 而是看起来与它们相似的图像在它们之上分层.

1000个路径命令基本上被单个图像替换 – 但仅在渲染时 – 原始路径实际上作为场景图中的对象存在,或者您正在使用的任何类型的DOM

2.分组进行栅格化

诀窍是在组中执行光栅化 – 将10-15个组合在一起并将它们光栅化为单个图像.这样可以保持较低的栅格数.在单击图像时 – 我们可以释放整个组或仅发布单击的项目.

3.在组上附加单击处理程序以在重新激活时恢复向量副本

当光栅化一个组时,我们可以简单地在其上附加一个点击处理程序,因此当点击时我们用向量切换位图.在命中测试时,图像的行为与矢量不同 – 图像本质上是正方形,不能进行不对称的测试.虽然向量认为它的边缘位于其路径边界上 – 但是图像认为它的边界是它的整个边界框.解决方案是单击图像以使用图像下方的矢量路径实际点击测试点击点 – 如果它返回true,则执行释放.

标签：javascript,optimization,paperjs
来源： https://codeday.me/bug/20190930/1834714.html