用于处理大量画布对象的最高效的库/框架/方法

-1

我正在研究大量使用HTML5画布的项目。画布可以有不同的高度/宽度，但为了争辩，我们假设它是512x512px。画布被分成一个网格，每个单元格为8个像素。这个网格共有4096个可能的单元格（并且网格可以更大，与1024x1024像素一样大）。用于处理大量画布对象的最高效的库/框架/方法

每个网格单元格都可以具有它自己的颜色以及鼠标事件。我在三个不同的库中实现了基本功能。第一个是原始画布，第二个是KineticJS，第三个是EaselJS。一旦画布上有2000多件物品，所有三家公司都开始与FPS问题斗争。

是否有任何库或工具可以帮助专门处理由大量对象/绘制产生的画布性能问题？有没有关于这个主题的任何教程（用于原始画布或使用库）？

来源

2014-09-01 Mike Trpcic

我个人喜欢Pixi.js（http://pixijs.com/）。它还有一个WebGL渲染器，如果设备支持它，它可以提高性能。 – Cristy 2014-09-02 11:29:38

你应该听听markE在说什么。我有我自己的画布引擎，我用这样的东西，我测试它只是为了比较数字。在一个屏幕上绘制4096个相同的彩色框我可以在旧机器上获得19-22fps的镀铬。绘制4096个不同颜色的盒子让我获得了12fps左右的效果。如果你做了相当于缓存画布（markE的提示＃1），我很容易获得60fps，因为它实际上只画1张图片。如果你然后clearRect框改变和重画那些你应该仍然在60fps的范围内，因为我看不到你需要改变太多的盒子。 – ericjbasti 2014-09-04 17:47:34

同样，使用spritesheets而不是单个图像将会更加高效。如果您正在使用矢量，请缓存它们。 EaselJS有一个SpriteSheetBuilder用于从其他内容生成运行时spritesheet。 – Lanny 2015-11-19 02:13:05

如果你想要数千个单元格的良好表现，我会用原始画布去。

图书馆是伟大的，但他们处理事件&绘图为您的性能。

设计提示＃1：

如果细胞的数量相对较少是由一个事件的影响，只需更新&重绘受影响的细胞，而不是清空画布和重绘每一个细胞。

设计提示＃2：

不要试图让所有4096+细胞是 “智能”（无处理自己的事件）。相反：

创建4096+个单元对象。
在画布上侦听[mousedown，mousemove，mouseup]，然后使用鼠标位置确定鼠标结束了哪个单元格。
对适当的单元格的属性进行任何所需的更改。

设计提示＃3：

单独从图形中的鼠标事件。

事件：将所需的单元格相关事件保存在数组中，而不是尝试更改事件处理程序内部的单元格属性。
使用独立的循环来执行任何由单元相关事件产生的绘图。

来源

2014-09-01 23:00:30 markE

您是否尝试过使用easeljs中的“缓存”功能？http://createjs.com/demos/easeljs/Cache.html

如果你画的形状，或者使用EaselJS一个容器对象，只需添加

shape.cache(startX, startY, width, height);

这样做这是什么副本从（startx的，startY）至（startx的画布的矩形区域+宽度，startY +高度）到外部画布上，并且在每次重绘期间，只需将像素数组复制回来。这大大提高了性能。你甚至可以对此进行转换。但是，如果您更改容器的形状或内容，则必须更新缓存。因此，这最适合不变的内容。

来源

2015-11-19 01:01:13

用于处理大量画布对象的最高效的库/框架/方法

回答

相关问题