用於處理大量畫布對象的最高效的庫/框架/方法

-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

用於處理大量畫布對象的最高效的庫/框架/方法

回答

相關問題