[发明专利]网页绘图方法、装置、设备及存储介质

说明书

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

技术领域

本发明实施例涉及计算机应用技术领域，尤其涉及一种网页绘图方法、装置、设备及存储介质。

背景技术

HTML Canvas(画布)是在HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容，是一个可以用JavaScript(以下简称JS)操作的位图(bitmap)。Canvas对象表示一个HTML画布元素<canvas>，其定义了一个API支持脚本化客户端绘图操作。目前被大量运用于大数据分析的图表绘制、3D图形/游戏的绘制中。

现有技术中，在利用Canvas绘图时，通常是逐一执行JS API，通过输入图形坐标序列进行图形绘制。目前，行业内存在很多Canvas绘制库、3D图形绘制库，如pixiJS,ThreeJS，提供了语义化的API，尽可能的方便绘图者轻松绘图。采用上述方案绘图时，即使是绘制简单的图形，也需要编辑多条JS API来实现，对绘图者的理解能力及记忆力都有考验，若在面对图形复杂化、工程化、强交互、甚至作为互动游戏等需求下(如添加事件绑定信息)，绘图者的工作量和调试难度逐渐上升，难以维护和调试。

发明内容

本发明实施例提供一种网页绘图方法、装置、设备及存储介质，可以降低网页绘图的难度，降低绘图者的工作量和调试难度。

第一方面，本发明实施例提供了一种网页绘图方法，其特征在于，包括：

根据绘图任务创建具有类HTML节点特性的画布组件，所述画布组件包括组件类型和组件属性；

根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性；

根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染。

进一步地，所述根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染，包括：

根据所述组件类型调用对应的应用程序接口API；

根据所述组件属性更新所述API中的属性值；

根据更新后的API执行画布组件，以进行图像渲染。

进一步地，根据被触发的预设事件绑定信息确认当前被执行的画布组件对应的组件类型和组件属性之前，还包括：

将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听；

接收事件监听中心发送的检测到预设事件被触发的信息。

进一步地，所述预设事件绑定信息包括鼠标绑定事件信息，所述鼠标绑定事件信息包括鼠标移入当前画布组件对应的图形、鼠标移出当前画布组件对应的图形、鼠标点击当前画布组件对应的图形、鼠标长按当前画布组件对应的图形及鼠标长按当前画布组件对应的图形后抬起；

相应的，将所述预设事件绑定信息发送至事件监听中心，以对所述预设事件进行监听，包括：

将所述鼠标绑定事件信息发送至鼠标监听中心，以对鼠标绑定事件进行监听。

进一步地，在根据所述组件类型和所述组件属性进行被执行的画布组件的图像渲染之后，还包括：