提高性能大画布[编辑]

Question

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

使用这个画布，我有问题能够移动对象，应用程序很容易被阻止而且不流动

我试图将画布的大小减小到400x400，并且速度提高了很多，而且它没有使用那么多的内存。

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

我留下一个例子fiddle

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

我不能保留示例的完整代码，因为它太大了。它是一个具有我的对象结构的JSON

修改 我们已经看到罪魁祸首与画布用户可用的内存和使用的浏览器有关。

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

Answer 1

所以2000x2000是一个大画布，你不应该用它来平移逻辑。

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

将画布缩小将检测不可见的对象并跳过渲染，这将节省渲染时间。

另一件事可能是组相似的对象togheter，因此结构可以优化分组rects的渲染，如果你有738个对象，你需要为你的应用程序用例找到特定的优化。

Answer 2

感谢Andrea，我已经做出了你建议的更改，我发现性能已经提高了很多。我看到隐藏了一个非常大的组，移动视口，性能提高了很多，而不是有一个过大的画布。