大画布提高性能[编辑]

佩德罗·何塞

我有一个大画布(2000x2000)和许多矩形对象(738)

使用此画布,我无法移动对象时遇到问题,该应用程序很容易被阻塞并且没有流动

我试图将画布的尺寸减小到400x400,并且速度提高了很多,并且它并没有占用太多内存。

这是什么原因呢?我可以使用fabricJS的新的objectCaching属性进行改进吗?

我离开一个例子小提琴

var canvas = new fabric.Canvas('canvas');
canvas.setDimensions({width:2000, height: 2000});

我不能离开该示例的完整代码,因为它太大了。这是具有我的对象结构的JSON

编辑我们已经看到,罪魁祸首与画布用户可用的内存以及所使用的浏览器有关。

我们认为在这些方面几乎无能为力。

安德里亚·博加齐(AndreaBogazzi)

因此2000x2000是一个大画布,您不应将其用于平移逻辑。

保持画布与显示的一样大,然后使用平移来移动。这是第一步。(请查看本教程,以进行平移http://fabricjs.com/fabric-intro-part-5#pan_zoom

使画布变小将检测到不可见的对象并跳过其渲染,这将节省渲染时间。

另一件事可能是将相似对象组合在一起,以便结构可以优化分组矩形的渲染,如果您有738个对象,则需要为应用程序用例找到特定的优化。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章