基于canvas元素的表格渲染方法、装置及计算机设备.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN111488149A(43)申请公布日2020.08.04(21)申请号202010164578.6(22)申请日2020.03.11(71)申请人平安健康保险股份有限公司地址200232上海市徐汇区凯滨路166号B座16楼(72)发明人赵学通(74)专利代理机构北京中强智尚知识产权代理有限公司11448代理人黄耀威(51)Int.Cl.G06F8/38(2018.01)G06F9/451(2018.01)G06F40/18(2020.01)权利要求书2页说明书10页附图4页(54)发明名称基于canvas元素的表格渲染方法、装置及计算机设备(57)摘要本申请公开了一种基于canvas元素的表格渲染方法、装置及计算机设备，可以解决在渲染生成表格时，兼容性差且渲染效率低的问题。其中方法包括：在待创建表格的页面中引入canvas-Table的JavaScript文件，以便全局使用canvas-Table函数；基于所述canvas-Table函数在主线程中创建canvas元素，并将所述canvas元素插入待渲染元素节点中；利用所述canvas-Table函数创建Worker线程；将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权；在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格。本申请适用于对表格的渲染生成。CN111488149ACN111488149A权利要求书1/2页1.一种基于canvas元素的表格渲染方法，其特征在于，包括：在待创建表格的页面中引入canvas-Table函数的JavaScript文件，以便全局使用canvas-Table函数；基于所述canvas-Table函数在主线程中创建canvas元素，并将所述canvas元素插入待渲染元素节点中；利用所述canvas-Table函数创建Worker线程；将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权；在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格。2.根据权利要求1所述的方法，其特征在于，所述在将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权之后，具体还包括：在所述Worker线程中接收上传的待渲染数据并获取canvas的控制权。3.根据权利要求2所述的方法，其特征在于，在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格之前，具体还包括：提取所述待渲染数据中包含的各个目标渲染元素；将所述待渲染数据中各个所述目标渲染元素对应的定制绘制函数确定为目标绘制函数；若判定所述待渲染数据中不存在与所述目标渲染元素对应的定制绘制函数，则将所述目标渲染元素对应的默认绘制函数确定为所述目标绘制函数。4.根据权利要求3所述的方法，其特征在于，在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格，具体包括：获取所述待渲染数据的文件类型；基于所述文件类型在所述Worker线程中利用各个所述目标绘制函数渲染生成表格。5.根据权利要求4所述的方法，其特征在于，若所述待渲染数据的文件类型为init，所述基于所述文件类型在所述Worker线程中利用各个所述目标绘制函数渲染生成表格，具体包括：在离屏canvas上调用getContext()，以获取CanvasRenderingContext2D接口提供的2D渲染背景；利用所述待渲染数据中各个目标渲染元素对应的参数信息确定待生成表格对应的配置信息；依据所述目标绘制函数中的外边框绘制函数绘制与所述配置信息对应的外边框；利用所述目标绘制函数中的内边框绘制函数绘制与所述配置信息对应的内边框；依据所述目标绘制函数中的单元格绘制函数以及所述待渲染数据中单元格的传入参数绘制与所述配置信息对应的单元格；若所述单元格的传入参数merge为row，所述依据所述目标绘制函数中的单元格绘制函数以及所述待渲染数据中单元格的传入参数绘制与所述配置信息对应的单元格，具体包括：预先绘制行数据，若判定当前列中的数据与上一列中的数据相同，则将当前列的单元格与上一列的单元格合并；2CN111488149A权利要求书2/2页若所述单元格的传入参数merge为col，所述依据所述目标绘制函数中的单元格绘制函数以及所述待渲染数据中单元格的传入参数绘制与所述配置信息对应的单元格，具体包括：预先绘制列数据，若判定当前行中的数据与上一行中的数据相同，则将当前行的单元格与上一行的单元格合并。6.根据权利要求4所述的方法，其特征在于，若所述待渲染数据的文件类型为change，所述基于所述文件类型在所述Worker线程中利用各个