基于canvas元素的表格渲染方法、装置及计算机设备制造方法及图纸

本申请公开了一种基于canvas元素的表格渲染方法、装置及计算机设备，可以解决在渲染生成表格时，兼容性差且渲染效率低的问题。其中方法包括：在待创建表格的页面中引入canvas‑Table的JavaScript文件，以便全局使用canvas‑Table函数；基于所述canvas‑Table函数在主线程中创建canvas元素，并将所述canvas元素插入待渲染元素节点中；利用所述canvas‑Table函数创建Worker线程；将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权；在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格。本申请适用于对表格的渲染生成。

【技术实现步骤摘要】
基于canvas元素的表格渲染方法、装置及计算机设备
本申请适用于计算机
，尤其涉及到一种基于canvas元素的表格渲染方法、装置及计算机设备。
技术介绍
由于在开发过程中，表格是最常用到的，为了能快速进行表格的制作以及数据的绑定，进而加快表格的生成速度，经常采用渲染的方式，使代码量大大减少，表格的生成更加方便和精确。目前业内有进行表格渲染组件依然使用的是过时的table标签来进行布局，然而table标签对移动端性能支持较差，因其子元素自适应的特性，移动端的展示会出现很多样式问题，甚至直接崩溃，使渲染效率较低。
技术实现思路
有鉴于此，本申请提供了一种基于canvas元素的表格渲染方法、装置及计算机设备，能够解决在渲染生成表格时，兼容性差且渲染效率低的问题。根据本申请的一个方面，提供了一种基于canvas元素的表格渲染方法，该方法包括：在待创建表格的页面中引入canvas-Table的JavaScript文件，以便全局使用canvas-Table函数；基于所述canvas-Table函数在主线程中创建canvas元素，并将所述canvas元素插入待渲染元素节点中；利用所述canvas-Table函数创建Worker线程；将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权；在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格。根据本申请的另一个方面，提供了一种基于canvas元素的表格渲染装置，该装置包括：引入模块，用于在待创建表格的页面中引入canvas-Table的JavaScript文件，以便全局使用canvas-Table函数；插入模块，用于基于所述canvas-Table函数在主线程中创建canvas元素，并将所述canvas元素插入待渲染元素节点中；创建模块，用于利用所述canvas-Table函数创建Worker线程；上传模块，用于将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权；生成模块，用于在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格。根据本申请的又一个方面，提供了一种非易失性可读存储介质，其上存储有计算机程序，程序被处理器执行时实现上述基于canvas元素的表格渲染方法。根据本申请的再一个方面，提供了一种计算机设备，包括非易失性可读存储介质、处理器及存储在非易失性可读存储介质上并可在处理器上运行的计算机程序，处理器执行程序时实现上述基于canvas元素的表格渲染方法。借由上述技术方案，本申请提供的一种基于canvas元素的表格渲染方法、装置及计算机设备，与目前利用table标签渲染生成表格的方式相比，本申请可使用canvas进行table组件的渲染，可首先在待创建表格的页面中引入canvas-Table的JavaScript文件，以便全局使用canvas-Table函数；之后利用canvas-Table函数创建canvas元素和Worker线程，并将canvas元素插入待渲染元素节点中；将待渲染元素节点对应的待渲染数据上传至Worker线程中，在Worker线程上利用待渲染数据中的绘制函数渲染生成表格。在本申请中，利用canvas渲染生成表格，由于canvas独立于框架之外，可以和react，vue，angular各大主流框架协同使用，故可提升表格生成的兼容性，另外，还使用canvas，webWorker技术，独立开辟线程，调用硬件加速，不需要复杂的层叠运算，只需要输出最终的渲染结果，进而保证了表格渲染的效率。附图说明此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本地申请的不当限定。在附图中：图1示出了本申请实施例提供的一种基于canvas元素的表格渲染方法的流程示意图；图2示出了本申请实施例提供的另一种基于canvas元素的表格渲染方法的流程示意图；图3示出了本申请实施例提供的一种基于canvas元素的表格渲染装置的结构示意图；图4示出了本申请实施例提供的另一种基于canvas元素的表格渲染装置的结构示意图。具体实施方式下文将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互结合。针对目前在利用table标签渲染生成表格时，兼容性差且渲染效率低的问题，本申请实施例提供了一种基于canvas元素的表格渲染方法，如图1所示，该方法包括：101、在待创建表格的页面中引入canvas-Table的JavaScript文件，以便全局使用canvas-Table函数。其中，canvas-Table函数为用于创建canvas元素和Worker线程的创建函数；canvas元素是一个可以使用脚本(这里特指JavaScript)来绘制图形的HTML元素。它提供了一系列完备的接口，相对于原始的table标签和CSS的组合，canvas可以利用JavaScript进行更加细致的操作，其可控性更好。绘制出来的表格更具表现力，大大增强了用户的体验。102、基于canvas-Table函数在主线程中创建canvas元素，并将canvas元素插入待渲染元素节点中。其中，待渲染元素可包含表格的宽高、单元格的宽高、边框的宽度、颜色、表格头部标题数据、表格数据等。待渲染元素节点对应各个待渲染元素所在的htm元素节点，将canvas元素插入待渲染元素节点，以便利用canvas渲染生成各个表格组件。103、利用canvas-Table函数创建Worker线程。在具体的应用场景中，JavaScript语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Worker线程为浏览器(宿主环境)提供的一个API，即通过引入JavaScript的“多线程”技术，可以在页面主运行的JavaScript线程中加载运行另外单独的一个或者多个JavaScript线程，从而创造多线程环境，允许主线程将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。等到Worker线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被Worker线程负担了，主线程(通常负责UI交互)就会很流畅，不会被阻塞或拖慢。104、将各个待渲染元素节点对应的待渲染数据上传至Worker线程并移交canvas的控制权。在具体的应用场景中，将各个待渲染元素节点对应的待渲染数据上传至Worker线程，并移交canvas的控制权后，可在Work本文档来自技高网...

【技术保护点】
1.一种基于canvas元素的表格渲染方法，其特征在于，包括：/n在待创建表格的页面中引入canvas-Table函数的JavaScript文件，以便全局使用canvas-Table函数；/n基于所述canvas-Table函数在主线程中创建canvas元素，并将所述canvas元素插入待渲染元素节点中；/n利用所述canvas-Table函数创建Worker线程；/n将各个所述待渲染元素节点对应的待渲染数据上传至所述Worker线程并移交canvas的控制权；/n在所述Worker线程上利用所述待渲染数据中的绘制函数渲染生成表格。/n

【技术特征摘要】
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，所述依据所述目标绘制函数中的单元格绘制函数以及所述待渲染数据中单元格的传入参数绘制与所述配置信息对应的单元格，具体包括：
预先绘制行数据，若判定当前列中的数据与上一列中的数据相同，则将当前列的单元格与上一列的单元格合并；
若所述单元格的传入...

【专利技术属性】
技术研发人员：赵学通，
申请(专利权)人：平安健康保险股份有限公司，
类型：发明
国别省市：上海;31