使用html Canvas的可编辑网格

Question

当我注意到在Google Spreadsheets的最新版本中他们使用canvas标签渲染电子表格网格时,我最近非常惊讶,而在过去他们使用try和true <table><tr><td>来渲染网格.

在之前的版本中,使用虚拟行技术在任何一个时间点只渲染一小部分实际行(类似于在slickgrid中完成的操作).这提供了相当不错的性能(slickgrid有500,000行的演示).

我的问题:

1. 如何canvas能够比虚拟DOM元素技术更有效？
2. 以这种方式使用canvas时,如何确保画布以与滚动相同的速度渲染,因为与虚拟行技术不同,没有预渲染缓冲区？
3. 有没有人知道使用html canvas创建可编辑网格的开源示例,或任何其他完成类似的代码示例？

谢谢.

Answer 1

我肯定只回答你的一个问题:

1. 在Canvas上绘图是一个简单的过程,它只是一个简单的大堆旧彩色位.另一方面,DOM Elements有更多的东西,比如事件处理程序,鼠标交互等等.所有这些总结并使DOM元素比仅仅在画布上绘图更重.

2. 有一些技巧,其中一个是绘制到屏幕外的画布,然后通过putImageData复制相关的部分.这主要与requestAnimationFrame结合使用,因此您只需在浏览器请求时绘制.正如我所说,我无法回答这100%

3. 我很确定已经没有这样做了,但我无法确定.

Answer 2

回答你的问题3:有没有人知道一个开源示例使用html canvas创建一个可编辑的网格,或任何其他完成类似的代码示例？

是的:超级网格.它是开源的.它使用canvas和Google的Polymer.看一看:

Hypergrid演示

Github中的超级网格