要在很長的區域上繪製多個對象，畫布？

Question

我需要顯示一個非常長的區域（沒有定義長度）與許多多邊形（簡單的形狀 - 圓形，正方形，一些文字）。顯然，我一次只需要一小段可見的片段。主要問題是有效的滾動和處理鼠標事件。我寫在GWT中。我到目前爲止考慮的事情：

1）畫布。創建一個可見區域大小的畫布。創建大於可見區域的緩衝區畫布。渲染到緩衝區（僅更改 - 如果在可見區域中更改了某些內容或在滾動期間向左/向右移動了新的部分）。當需要時，將緩衝區的適當部分渲染爲可見的畫布。這似乎工作得足夠快。但！我必須實現這種智能緩衝，決定哪些部分需要重新渲染，哪些不需要。我需要記住所有對象來檢測鼠標點擊和鼠標懸停（它應該是間隔樹或分段樹等一些很好的結構，因爲鼠標懸停檢查非常頻繁 - 但這已經在瀏覽器中實現了，聽起來像重新發明了輪子） - 這是很多工作！ 也許有東西準備好了嗎？ 2）html（divs/images） - 所以，這個想法是渲染具有div和圖像的所有元素（圖像可以先在canvas上生成，而不是metter）。將它們絕對放在長div上，並使用瀏覽器滾動來滾動div。直到你到達這個長格子的末尾，你需要重新定位所有東西，因此有更多的空間滾動（這將凍結滾動一段時間）。所以也許有可能在同一時間在第二個div中渲染，然後切換它們。這可能會起作用，但這聽起來像是黑客攻擊，它可能會在一次可見多個對象時出現嚴重問題。加上在瀏覽器中實現的鼠標事件。

3）SVG - 我還沒有嘗試過，但我想我會遇到同樣的性能問題與HTML /分隔（滾動左/右）

任何想法是什麼時候？哪種方法最好？有更好的嗎？ WebGL（它不會在IE中工作，移植到IE將是困難的概率）。我應該如何實現這一點？

Answer 1

你似乎明白了利弊。畫布速度更快，但層次更低，編碼更難。由於其事件處理和對象訪問，DOM較慢但更易於編寫代碼。如果DOM太慢，你不得不求助於畫布。

一個可能的折衷方案是渲染完整畫布並使用overflow:hidden進行剪裁。這就是我在處理波形顯示時所做的。

SVG應該比形狀的DOM更容易。由於SVG不是完全跨瀏覽器，你應該使用像http://raphaeljs.com/

Answer 2

我會去畫布，因爲它相對較快。就屏幕外定位，鼠標事件和重新渲染而言 - 可以通過使用像Fabric.js這樣的畫布庫來照顧所有人。看看demos。

Event inspector demo & working with events tutorial可能會有用。

默認情況下關閉屏幕（不）渲染。只需將對象放置在離屏座標處並且它們不可見。