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

权利要求书

1.一种基于HTML5 Canvas的表格绘制方法，其特征在于，具体如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

滚动行为绘制过程如下：

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

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

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

通过前述将主体图层绘制在缓存画布，将缓存画布的新区域进行局部刷新绘制；

通过静态绘制过程，将缓存画布的新区域绘制在主画布相应位置；

在主画布上绘制装饰图层。

2.一种基于HTML5 Canvas的表格绘制的系统，其特征在于，包括：

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

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

用于根据表格绘制状态，将表格绘制过程分为静态绘制过程和滚动行为绘制过程的装置；

用于判断数据是否稳定且在行为过程中不易改变的装置；

用于将单元格样式、单元格内容、单元格边框、单元格图表信息归类为绘制主体图层的装置；

用于将稳定且在行为过程中不易改变的数据绘制在缓存画布上的装置；

用于判断数据是否不稳定且在行为过程中经常改变的装置；

用于将选择边框、拖拽边框、剪贴边框、悬浮、高亮效果这些信息归类为装饰图层的装置；

用于将不稳定且在行为过程中经常改变的数据绘制在主画布上的装置；

用于将用户不可见，且在后台进行绘制的画布实例定义为缓存画布的装置；

用于将用户可见，且用来真实呈现表格所有内容的画布实例定义为主画布的装置；

用于获取整个表格的大小尺寸及当前DPI的装置；

用于初始化缓存画布的装置；

用于在缓存画布上绘制表格背景图层的装置；

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

用于在缓存画布上绘制表格灰色区域图层的装置；

用于在缓存画布上绘制表格边框及表格线图层的装置；

用于当在缓存画布上绘制完毕之后，根据上下文的绘制区域限定，通过Canvas的图像拖拽dragImage属性,将缓存画布作为参数直接交由主画布绘制的装置；

用于静态绘制过程中在主画布上绘制装饰图层的装置；

用于当表格发生滚动，需要对新区域进行绘制，重置当前主画布区域的装置；

用于根据滚动位移对缓存画布进行剪裁并平移的装置；

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

用于将缓存画布的新区域进行局部刷新绘制的装置；

用于将缓存画布的新区域绘制在主画布相应位置的装置；

用于在滚动行为绘制过程中主画布上绘制装饰图层的装置。