将重 SVG（大约 10k 矢量对象）加载到画布中

Posted 2023-03-28

【中文标题】将重 SVG（大约 10k 矢量对象）加载到画布中

【英文标题】：Load heavy SVG (around 10k vector object) into canvas

【发布时间】：2018-10-28 11:59:55

【问题描述】：

我们想将重型 SVG 的 JSON 对象（大约 10k 矢量对象）加载到画布中。现在我们能够做到，但由于画布中矢量对象的数量，这个过程非常滞后。以下是我们关注的流程

加载保存在数据库中的 SVG 作为 JSON 对象在 画布 因此用户可以进行编辑。 在 SVG 中转换画布。 在数据库中将编辑后的 ​​SVG 保存为 JSON 对象。

当矢量对象的数量较少（小于 2K）时，这可以正常工作，但是当数量变大时，系统开始滞后并且一些它崩溃了。我们要管理大约 15k - 20k 个矢量对象。我们为此使用了 fabricjs。

->

【参考方案1】：

尝试使用最新版本的 fabricjs (2.3)。它使用画布来缓存路径。只有在调整路径大小时才会这样绘制路径。