要在很长的区域上绘制多个对象，画布？

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可能会有用。

默认情况下关闭屏幕（不）渲染。只需将对象放置在离屏坐标处并且它们不可见。