[发明专利]一种基于HTML5 Canvas的表格绘制方法和系统

说明书

本发明公开了一种基于HTML5 Canvas的表格绘制方法，首先根据需要绘制的表格内容的特性，将稳定且在行为过程中不易改变的数据绘制在缓存画布上，将不稳定且在行为过程中经常改变的数据绘制在主画布上，定义缓存画布是指用户不可见，在后台进行绘制的画布实例，主画布是指用户可见的，用来真实呈现表格所有内容的画布实例，然后绘制表格，绘制过程分为静态绘制过程和滚动行为绘制过程，本发明还公开了一种基于HTML5 Canvas的表格绘制系统，本发明解决了现有技术中存在的表格绘制占用CPU严重导致卡顿影响用户体验的问题。

技术领域

本发明属于双画布缓存技术领域，具体涉及一种基于HTML5 Canvas的表格绘制方法，本发明还涉及一种基于HTML5 Canvas的表格绘制系统。

背景技术

当画布上内容众多，一旦表格因滚动，局部变更等行为驱动需要重新绘制时，重绘整个表格会带来大量的CPU占用，表现在用户场景中，会产生卡顿效果，极其影响用户体验。而本发明中描述的使用双画布缓存绘制的画法，会极大的提升绘制性能，降低CPU的占用，让表格的行为更加流畅自然，增强用户体验。

发明内容

本发明的目的是提供一种基于HTML5 Canvas的表格绘制方法，解决了现有技术中存在的表格绘制占用CPU严重导致卡顿影响用户体验的问题。

本发明的另一目的是提供一种基于HTML5 Canvas的表格绘制系统。

本发明所采用的第一技术方案是，一种基于HTML5 Canvas的表格绘制方法，具体如下：

根据需要绘制的表格内容的特性，将表格绘制方法分为绘制主体图层和绘制装饰图层；

根据表格绘制过程中所用画布可见性，将画布分为缓存画布和主画布；

根据表格绘制状态，将表格绘制过程分为静态绘制过程和滚动行为绘制过程。

本发明的特点还在于，

将稳定且在行为过程中不易改变的数据绘制在缓存画布上，例如单元格样式、单元格内容、单元格边框、单元格图表信息，将上述操作称之为绘制主体图层；

将不稳定且在行为过程中经常改变的数据绘制在主画布上，例如选择边框、拖拽边框、剪贴边框、悬浮、高亮效果，将上述操作称之为装饰图层。

缓存画布是指用户不可见，在后台进行绘制的画布实例，所述主画布是指用户可见的，用来真实呈现表格所有内容的画布实例，缓存画布、主画布均为HTML5 Canvas画布实例。

静态绘制过程是指将主体图层绘制在缓存画布上，具体如下：

获取整个表格的大小尺寸及当前DPI，初始化缓存画布；

在缓存画布上绘制表格背景图层；

在缓存画布上绘制表格列头，行头及视图区域图层；

在缓存画布上绘制表格灰色区域图层；

在缓存画布上绘制表格边框及表格线图层；

当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas自有方法dragImage，将缓存画布作为参数直接交由主画布绘制；

然后在主画布上绘制装饰图层；

滚动行为绘制过程如下：

基于静态绘制过程的基础，当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域；

根据滚动位移对缓存画布进行剪裁并平移；

将缓存画布平移内容绘制在主画布相应位置，即缓存画布向主画布刷新绘制；