网页绘图方法、装置、设备及存储介质制造方法及图纸

本发明专利技术实施例公开了一种网页绘图方法、装置、设备及存储介质。该方法包括：根据绘图任务创建具有类HTML节点特性的画布组件；根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。本发明专利技术实施例提供的网页绘图方法，通过创建具有类HTML节点特性的画布组件，在实现包含预设事件绑定信息的特殊绘图时，根据被触发的预设事件绑定信息确认被执行的画布组件对应的组件类型和组件属性，最后进行被执行的画布组件的图像渲染，相比于现有技术采用JS API实现网页绘图，降低网页绘图的难度的同时，降低绘图者的工作量和调试难度。

【技术实现步骤摘要】
网页绘图方法、装置、设备及存储介质
本专利技术实施例涉及计算机应用
，尤其涉及一种网页绘图方法、装置、设备及存储介质。
技术介绍
HTMLCanvas(画布)是在HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容，是一个可以用JavaScript(以下简称JS)操作的位图(bitmap)。Canvas对象表示一个HTML画布元素<canvas>，其定义了一个API支持脚本化客户端绘图操作。目前被大量运用于大数据分析的图表绘制、3D图形/游戏的绘制中。现有技术中，在利用Canvas绘图时，通常是逐一执行JSAPI，通过输入图形坐标序列进行图形绘制。目前，行业内存在很多Canvas绘制库、3D图形绘制库，如pixiJS,ThreeJS，提供了语义化的API，尽可能的方便绘图者轻松绘图。采用上述方案绘图时，即使是绘制简单的图形，也需要编辑多条JSAPI来实现，对绘图者的理解能力及记忆力都有考验，若在面对图形复杂化、工程化、强交互、甚至作为互动游戏等需求下(如添加事件绑定信息)，绘图者的工作量和调试难度逐渐上升，难以维护和调试。
技术实现思路
本专利技术实施例提供一种网页绘图方法、装置、设备及存储介质，可以降低网页绘图的难度，降低绘图者的工作量和调试难度。第一方面，本专利技术实施例提供了一种网页绘图方法，其特征在于，包括：根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。进一步地，所述根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染，包括：根据所述组件类型调用对应的应用程序接口API；根据所述组件属性更新所述API中的属性值；根据更新后的API执行画布组件，以进行图像渲染。进一步地，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性之前，还包括：将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听；接收事件监听中心发送的检测到预设事件被触发的信息。进一步地，所述预设事件绑定信息包括鼠标绑定事件信息，所述鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形、鼠标移出当前画布组件对应的图形、鼠标点击当前画布组件对应的图形、鼠标长按当前画布组件对应的图形及鼠标长按当前画布组件对应的图形后抬起；相应的，将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听，包括：将所述鼠标绑定事件信息发送至鼠标监听中心，以对鼠标绑定事件进行监听。进一步地，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：当检测到组件属性被修改时，判断是否是对画布组件对应的图形的形状或位置的修改；若是，则返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作；若不是，则返回执行根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性的操作。进一步地，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：当检测到画布组件被删除时，返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作。进一步地，根据绘图任务创建具有类HTML节点特性的画布组件，包括：获取绘图任务对应的具有类HTML节点特性的数据；对所述数据进行解析，根据解析结果创建具有类HTML节点特性的画布组件。进一步地，所述类HTML节点特性包括：节点参数特性、节点事件绑定特性、子节点特性、节点事件冒泡特性、节点插入特性及节点删除特性。进一步地，在获取绘图任务对应的具有类HTML节点特性的数据之前，还包括：根据所述类HTML节点特性对对绘图任务对应的原始数据进行特性转换。第二方面，本专利技术实施例还提供了一种网页绘图装置，该装置包括：画布组件创建模块，用于根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；组件类型和组件属性确定模块，用于根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；图像渲染模块，用于根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。第三方面，本专利技术实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如本专利技术实施例所述的网页绘图方法。第四方面，本专利技术实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本专利技术实施例所述的网页绘图方法。本专利技术实施例，首先根据绘图任务创建具有类HTML节点特性的画布组件，画布组件包括组件类型和组件属性，然后根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性，最后根据组件类型和组件属性进行被执行的画布组件的图像渲染。本专利技术实施例提供的网页绘图方法，通过创建具有类HTML节点特性的画布组件，在实现包含预设事件绑定信息的特殊绘图时，根据被触发的预设事件绑定信息确认被执行的画布组件对应的组件类型和组件属性，最后进行被执行的画布组件的图像渲染，相比于现有技术采用JSAPI实现网页绘图，降低网页绘图的难度的同时，迎合了用户熟悉HTML操作的习惯，降低绘图者的工作量和调试难度。附图说明图1是本专利技术实施例一中的一种网页绘图方法的流程图；图2是本专利技术实施例二中的一种网页绘图方法的流程图；图3是本专利技术实施例二中的基于所述网页绘图方法绘制的三维图；图4是本专利技术实施例三中的一种网页绘图装置的结构示意图；图5是本专利技术实施例四中的一种计算机设备的结构示意图。具体实施方式下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。实施例一图1为本专利技术实施例一提供的一种网页绘图方法的流程图，本实施例可适用于在HTML5页面中的Canvas画布中实现网页绘图的情况，该方法可以由网页绘图装置来执行，该装置可由硬件和/或软件组成，并一般可集成在具有网页绘图功能的设备中，该设备可以是服务器、终端或服务器集群等电子设备。如图1所示，该方法具体包括如下步骤：步骤110，根据绘图任务创建具有类HTML节点特性的画布组件。其中，类HTML节点特性可以是类似于HTML节点特性的特性。画布组件包括组件类型和组件属性。组件类型可以表征画布组件对应的图形信息，组件属性可以包括画布组件对应的图形的参数。示例性的，假设画布组件对应的图形为圆，则组件类型的表现形式为“Circle”，组件属性可以包括该圆的圆心位置、半径、填充颜色。绘图任务可以包括画布的起始位置坐标、图像中包含的图形、各图形之间的位置关系以及各图像的位置、填充颜色等信息。类HTML节点特性可以包括节点参数特性、节点事件绑定特性、子节点特性、节点事件冒泡特性、节点插入特性及节点删除特性。表1中介绍了一实施例中画布组件的各个类HTML节点特性的具体内容。表1从表1中可以看出，本实施例中，将画布组件按照HTML节点特性进行特性转换，使得画布组件具有类HTML节点特本文档来自技高网...

【技术保护点】
1.一种网页绘图方法，其特征在于，包括：根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。

【技术特征摘要】
1.一种网页绘图方法，其特征在于，包括：根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。2.根据权利要求1所述的方法，其特征在于，所述根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染，包括：根据所述组件类型调用对应的应用程序接口API；根据所述组件属性更新所述API中的属性值；根据更新后的API执行画布组件，以进行图像渲染。3.根据权利要求1所述的方法，其特征在于，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性之前，还包括：将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听；接收事件监听中心发送的检测到预设事件被触发的信息。4.根据权利要求3所述的方法，其特征在于，所述预设事件绑定信息包括鼠标绑定事件信息，所述鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形、鼠标移出当前画布组件对应的图形、鼠标点击当前画布组件对应的图形、鼠标长按当前画布组件对应的图形及鼠标长按当前画布组件对应的图形后抬起；相应的，将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听，包括：将所述鼠标绑定事件信息发送至鼠标监听中心，以对鼠标事件进行监听。5.根据权利要求1所述的方法，其特征在于，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：当检测到组件属性被修改时，判断是否是对画布组件对应的图形的形状或位置的修改；若是，则返回执行根据绘图任务创建具有类HTML节点特性的画布组件的操作；若不是，则返回执行根据...

【专利技术属性】
技术研发人员：汪逍，任泽，
申请(专利权)人：智慧芽信息科技苏州有限公司，
类型：发明
国别省市：江苏,32