一种基于web画板的图形绘制方法、装置、设备及存储介质与流程

1.本技术实施例涉及web图形绘制技术领域，尤其涉及一种基于web画板的图形绘制方法、装置、设备及存储介质。


背景技术：

2.传统的web白板是一个可以提供用户进行绘画的画板，其中提供了各类图形工具以帮助用户绘画。传统的web白板是基于一个开源图形绘制库进行开发，图形绘制库主要是通过结合图形库以及用户在画板上的行为，计算并绘制图形到画板上。其中，图形绘制库提供一个内置的基础图形库，如果基础图形库不能满足项目开发需求，则需要基于基础图形库进行开发和创建更多的图形，例如开发椭圆图形，但是基础图形库并没有内置该基础图形，则基于基础图形中的圆图形来开发椭圆图形。
3.发明人在基于现有的web白板进行绘图使用时发现，其提供的图形扩展功能并不足以满足各种项目开发需求，尤其在某些特定场景下存在需要开发一种毫无规则的图形，如果仅基于已有的基础图形库进行开发，并不能实现绘制任意图形。


技术实现要素：

4.本技术实施例提供一种基于web画板的图形绘制方法、装置、设备及存储介质，能够解决现有web画板无法绘制任意图形的问题。
5.在第一方面，本技术实施例提供了一种基于web画板的图形绘制方法，包括：
6.确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用所述图形绘制工具将所述绘制行为数据转换为对应的图形数据；
7.调用所述图形数据对应的图形绘制工具生成所述图形数据对应的图形显示信息，并根据所述图形显示信息在画板上进行渲染显示；
8.确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用所述图形扩展工具将所述扩展行为数据转换为对应的扩展目标和扩展参数；
9.调用所述图形扩展工具根据所述扩展参数更新所述扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据所述图形显示信息在画板上进行渲染显示。
10.在第二方面，本技术实施例提供了一种基于web画板的图形绘制装置，包括：
11.第一行为数据获取模块，被配置为确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用所述图形绘制工具将所述绘制行为数据转换为对应的图形数据；
12.第一图形绘制模块，被配置为调用所述图形数据对应的图形绘制工具生成所述图形数据对应的图形显示信息，并根据所述图形显示信息在画板上进行渲染显示；
13.第二行为数据获取模块，被配置为确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用所述图形扩展工具将所述扩展行为数据转换为对应的扩展目标和扩展参数；
14.第二图形绘制模块，被配置为调用所述图形扩展工具根据所述扩展参数更新所述扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据所述图形显示信息在画板上进行渲染显示。
15.在第三方面，本技术实施例提供了一种电子设备，包括：
16.存储器以及一个或多个处理器；
17.所述存储器，用于存储一个或多个程序；
18.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面所述的图形绘制方法。
19.在第四方面，本技术实施例提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如第一方面所述的图形绘制方法。
20.本技术实施例通过确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据；调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示；确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数；调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。通过上述技术手段，通过图形绘制工具，实现图形的任意绘制，通过图形扩展工具，实现对画板上已有图形的任意扩展，通过这两种类型的图形工具可以满足大部分特殊图形的创建和交互。
附图说明
21.图1是本技术实施例一提供的一种基于web画板的图形绘制方法的流程图；
22.图2为本发明实施例一提供的第一显示示意图；
23.图3是图形数据的一种可选的具体生成流程图；
24.图4是图形数据的一种可选的具体渲染流程图；
25.图5为本发明实施例一提供的第二显示示意图；
26.图6是扩展行为数据的一种可选的具体转换流程图；
27.图7为本发明实施例一提供的第三显示示意图；
28.图8是图形数据的一种可选的具体更新和渲染流程图；
29.图9为本发明实施例一提供的第四显示示意图；
30.图10是本技术实施例二提供的一种基于web画板的图形绘制方法的流程图；
31.图11为本发明实施例二提供的第一显示示意图；
32.图12是本技术实施例三提供的一种基于web画板的图形绘制装置的结构示意图；
33.图13是本技术实施例四提供的一种电子设备的结构示意图。
具体实施方式
34.为了使本技术的目的、技术方案和优点更加清楚，下面结合附图对本技术具体实施例作进一步的详细描述。可以理解的是，此处所描述的具体实施例仅仅用于解释本技术，而非对本技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本技术相关
的部分而非全部内容。在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
35.本技术提供的基于web画板的图形绘制、装置、设备及存储介质，旨在确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据；调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示；确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数；调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。相对于传统的web画板技术，其基于开源图形绘制库进行开发，图形绘制库主要是通过结合基础图形库以及用户在画板上的行为，计算并绘制图形到画板上。但是基础图形库中的存储的图形有限，传统web画板技术的图形扩展功能有限，其不能满足各种项目开发需求。基于此，本技术实施例提供一种基于web画板的图形绘制、装置、设备及存储介质，以解决现有web画板无法绘制任意图形的问题。
36.实施例一：
37.图1是本技术实施例一提供的一种基于web画板的图形绘制方法的流程图。实施例中提供的基于web画板的图形绘制方法可以由基于web画板的图形绘制设备执行，该基于web画板的图形绘制设备可以通过软件和/或硬件的方式实现，该基于web画板的图形绘制设备可以是两个或多个物理实体构成，也可以是一个物理实体构成。例如，基于web画板的图形绘制设备可以是电脑、手机、平板或交互平板等。
38.为了便于理解，实施例中以交互平板为基于web画板的图形绘制设备进行示例性描述。其中，交互平板可以是通过触控技术对显示在显示平板上的内容进行操控和实现人机交互操作的一体化设备，其集成了投影机、电子白板、幕布、音响、电视机以及视频会议终端等一种或多种功能。
39.一般而言，交互平板包括至少一块显示屏。例如，交互平板配置有一块具有触摸功能的显示屏，且该显示屏可以是电容屏、电阻屏或者电磁屏。进一步的，用户可以通过手指或触控笔触控显示屏的方式实现触控操作，相应的，交互平板检测触控位置，并根据触控位置对应的显示内容确定响应方案，进而进行响应，以实现触摸功能。例如，根据触控位置确定对应的显示内容为某个功能的控件，此时，响应方案为执行该功能。再如，根据触控位置确定对应的图形绘制工具，此时，响应方案为确定被选中的图形绘制工具。
40.典型的，交互平板安装有至少一类操作系统，其中，操作系统包括但不限定于安卓系统、linux系统及windows系统。进一步的，交互平板可以安装有web浏览器。可以通过web浏览器进入本技术实施例提供的web画板页面。实施例中，以在该web画板页面进行基于web画板的图形绘制方法为例，进行描述。
41.具体的，参考图1，本技术实施例提供的基于web画板的图形绘制方法包括：
42.s110、确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制
工具将绘制行为数据转换为对应的图形数据。
43.具体的，图形绘制工具和图形扩展工具配置在图形工具包中，图形工具包包括多种图形绘制工具和图形扩展工具。示例性的，参考图2，在web画板页面可以包括图形工具包10和画板20，图形工具包中配置图形绘制工具101，图形扩展工具102和元素添加工具103，除此之外，图形工具包还包括功能扩展接口104，功能扩展接口用于扩展具备新功能的图形工具，其具备的功能由功能扩展接口104调用的程序决定。具体的，图形绘制工具101可以包括多种绘制工具，例如，矩形绘制工具、圆形绘制工具、直线绘制工具和任意绘制工具。图形扩展工具102可以包括多种扩展工具，例如，缩放工具、旋转工具和对称工具。
44.示例性的，确定被选中的图形绘制工具101，即确定用户在图形工具包中选中的图形绘制工具的类型。以用户选中直线绘制工具为例。在确定用户选中的直线绘制工具后，获取该直线绘制工具对应的配置参数。其中，配置参数可以包括直线的宽度、颜色、类型以及层级。绘制行为数据为用户在绘制功能下，通过触控操作输入的触摸位置、触摸时间、触摸面积和触摸路径中的一个或多个数据。直线绘制工具根据在直线绘制工具的绘制功能下获取的绘制行为数据，以及直线绘制工具对应的配置参数，将绘制行为数据转换为对应的图形数据。
45.具体的，图形绘制工具包括第一行为引擎，第一行为引擎为将绘制行为数据转换成图形数据的功能接口。示例性的，参考图3，图3是图形数据的一种可选的具体生成流程图。如图3所示，图形数据的生成流程包括：
46.s1101、确定被选中的图形绘制工具，并获取图形绘制工具对应的第一行为引擎；
47.s1102、获取检测到的绘制行为数据，绘制行为数据包括检测到的触摸位置、触摸时间、触摸面积和触摸路径中的一个或多个；
48.s1103、调用第一行为引擎将绘制行为数据转换成图形数据，第一行为引擎为将绘制行为数据转换成图形数据的功能接口，图形数据包括图形尺寸、颜色、位置和层级中的一个或多个。
49.具体的，第一行为引擎对应的功能接口连接绘制行为数据转换模块，绘制行为数据转换模块用于接收绘制行为数据，并根据绘制行为数据与预设的函数公式，将绘制行为数据转换为图形数据。具体的，在直线绘制功能下，用户输入的绘制行为数据包括开始触摸位置和结束触摸位置，根据预设的直线函数公式，由两点确定了两点之间的连线对应的直线函数，得到直线函数对应的直线数据。此时的直线数据只包含直线的位置数据，可选的，绘制行为数据转换模块根据直线绘制工具的配置参数，在直线数据的基础上再结合尺寸、颜色和层级，得到最终的直线数据。可理解的，不同图形绘制工具对应的第一行为引擎的转换功能不同，其转换功能由第一行为引擎连接的绘制行为数据转换内置的函数公式决定。
50.示例性的，在用户选中直线绘制工具后，在直线绘制功能下，将用户输入的绘制行为数据发送至直线绘制工具对应的第一行为引擎。第一行为引擎对应的绘制行为数据转换模块根据开始触摸位置和结束触摸位置，生成对应的直线位置数据，再根据直线绘制工具的配置参数，生成直线数据。可选的，用户可在图形工具包10中编辑图形绘制工具的配置参数。
51.s120、调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示。
52.示例性的，由于图形数据为参数数据，而不是像素数据，因此需要通过图形绘制工具的其他功能接口将第一行为引擎生成的图形数据渲染成图形显示信息，并将图形显示信息在画板上呈现。具体的，图形绘制工具还包括图形渲染器，图形渲染器为将图形数据渲染成图形显示信息的功能接口。参考图4，图4是图形数据的一种可选的具体渲染流程图。如图4所示，图形数据的渲染流程包括：
53.s1201、在预设的时间节点，根据图形数据确定生成图形数据的图形绘制工具，并获取图形绘制工具对应的图形渲染器；
54.s1202、调用图形渲染器将图形数据渲染成对应的图形显示信息，并将图形显示信息显示在画板上，图形渲染器为将图形数据渲染成图形显示信息的功能接口。
55.可选的，在较短时间内，用户可能通过一个或多个图形绘制工具输入大量的绘制行为数据，每个图形绘制工具对应的第一行为引擎将绘制行为数据转换为图形数据。为方便后续对图形数据进行统一的处理，可将图形数据存储在预设的数据库中，以图形数据对应的图形绘制工具来分类存储。此外，由于在短时间内生成的图形数据太多，图形绘制工具难以实时响应图形数据的渲染操作。因此，预设时间间隔，在预设的时间节点，将在当前时间节点和上一时间节点之间生成的图形数据发送至对应的图形绘制工具，由图形绘制工具对应的图形渲染器生成图形显示信息。具体的，本技术实施例是通过web浏览器进入的web画板页面，web浏览器的运行环境每隔16ms刷新一次，可根据web浏览器的运行环境的刷新时间节点，设定对应的渲染时间节点，即每隔16ms将不同的图形数据分配给对应的图形渲染器。调用图形渲染器根据图形数据，生成对应的图形显示信息，然后将图形显示信息显示在画板上。
56.示例性的，参考图5，用户选中直线绘制工具，并在画板输入了六个不同的触摸位置。获取用户输入的触摸位置，并将触摸位置发送至直线绘制工具对应的第一行为引擎，第一行为引擎根据六个不同的触摸位置，生成了三条直线对应的直线数据。将直线数据存储至直线绘制工具对应的数据库中，在下一个渲染时间节点到来时，从数据库中获取该直线数据，并将该直线数据发送至直线绘制工具对应的图形渲染器。具体的，为方便判断在图形数据是否已生成对应的图形显示信息，可将数据库划分成绘制数据库和非绘制数据库，将还未生成对应的图形显示信息的图形数据存储至非绘制数据库，将已生成对应的图形显示信息的图形数据存储至绘制数据库。图形渲染器根据直线数据，生成对应的直线显示信息。将直线显示信息呈现在画板20上，得到图5中的第一直线1011、第二直线1012和第三直线1013。
57.s130、确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数。
58.示例性的，确定被选中的图形扩展工具，即确定用户在图形工具包中选中的图形扩展工具的类型。扩展行为数据为用户在扩展功能下，通过触控操作输入的触摸位置和触摸路径中的一个或多个数据。以用户选中缩放工具为例，缩放工具根据在缩放工具的扩展功能下获取的扩展行为数据，生成对应的扩展目标和扩展参数。
59.具体的，图形扩展工具包括第二行为引擎，第二行为引擎为将扩展行为数据转换成扩展目标和扩展参数的功能接口，扩展目标为目标选中框，扩展目标对应的图形数据为位于目标选中框内的图形显示信息对应的图形数据。示例性的，参考图6，图6是扩展行为数
据的一种可选的具体转换流程图。如图6所示，扩展行为数据的转换流程包括：
60.s1301、确定被选中的图形扩展工具，并获取图形扩展工具对应的第二行为引擎；
61.s1302、获取检测到的扩展行为数据，扩展行为数据包括检测到的触摸位置和触摸路径；
62.s1303、调用第二行为引擎将扩展行为数据转换成扩展目标和扩展参数，第二行为引擎为将扩展行为数据转换成扩展目标和扩展参数的功能接口，扩展目标为目标选中框，扩展目标对应的图形数据为位于目标选中框内的图形显示信息对应的图形数据。
63.具体的，第二行为引擎对应的功能接口连接扩展行为数据转换模块，扩展行为数据转换模块包括扩展目标确定单元和扩展参数确定单元，扩展目标确定单元连接扩展参数确定单元。
64.扩展目标确定单元用于接收前半部分的扩展行为数据，并根据前半部分的扩展行为数据与预设的函数公式，生成目标选中框，并将目标选中框发送至扩展参数确定单元。其中，目标选中框包括闭环图形选中框和矩形选中框。闭环图形选中框为需根据用户输入的开始触摸位置，触摸路径和结束触摸位置生成对应的闭环图形框，其中开始触摸位置和结束触摸位置为同一触摸位置。矩形选中框根据用户输入的开始触摸位置和结束触摸位置生成对应的矩形图形框，即开始触摸位置和结束触摸位置的连线为矩形图形框的对角线。可理解的，目标选中框为闭环选中框还是矩形选中框由扩展目标的内置函数公式决定。
65.扩展参数确定单元用于接收后半部分的扩展行为数据，以及接收扩展目标确定单元发送的目标选中框，并根据后半部分的扩展行为数据，目标选中框和预设的函数公式，确定扩展参数。其中，扩展参数包括直接输入参数和间接操作参数。直接输入参数为用户直接在页面输入的参数；间接操作参数为用户对目标选中框进行扩展操作后，根据扩展前后的目标选中框的尺寸或位置计算得到的参数。可理解的，直接输入参数和间接操作参数由扩展参数确定单元来设定。
66.示例性的，以扩展目标确定单元对应生成矩形选中框和扩展参数确定单元对应生成间接操作参数为例。在用户选中缩放工具后，在缩放功能下，将用户输入的扩展行为数据发送至缩放工具对应的第二行为引擎。在缩放功能下，用户输入的扩展行为数据包括前半部分的矩形选中框操作数据和后半部分的缩放操作数据，矩形选中框操作数据包括开始触摸位置和结束触摸位置，缩放操作数据包括原始触摸位置和衍生触摸位置。扩展目标确定单元根据开始触摸位置，结束触摸位置和预设的函数公式确定矩形选中框。进一步的，扩展参数确定模块根据原始触摸位置，衍生触摸位置和预设的函数公式，确定缩放参数。具体的，判断原始触摸位置与矩形选中框的位置关系；若原始触摸位置为矩形选中框的顶点，则衍生触摸位置为缩放后的矩形选中框对应的顶点；若原始触摸位置为矩形选中框的边框中的一点，则衍生触摸位置为缩放后的矩形选中框的对应的边框中的一点。根据缩放前后的矩形选中框的尺寸比例，确定缩放参数。
67.示例性的，参考图7，用户选中图形扩展工具102。在本实施例中，图形扩展工具102为缩放工具，其目标选中框为矩形选中框，扩展参数为间接操作参数。具体的，用户输入开始触摸位置和结束触摸位置，缩放工具对应的第二行为引擎根据开始触摸位置和结束触摸位置，生成第一矩形选中框1021。此时，用户通过第一矩形选中框1021选中画板上的三条直线，分别为第一直线1011、第二直线1012和第三直线1033。用户输入原始触摸位置1022和衍
生触摸位置1023，缩放工具对应的第二行为引擎根据原始触摸位置1022和衍生触摸位置1023，生成放大后的第二矩形选中框1024。根据第一矩形选中框和第二矩形选中框的边长比例，确定放大参数。
68.s140、调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。
69.示例性的，为将目标选中框中的图形显示信息进行扩展，需通过图形扩展工具的其他功能接口将目标选中框中的图形显示信息对应图形数据进行更新，并由图形数据对应的图形渲染器对其进行渲染，得到扩展后的图形显示信息。具体的，图形扩展工具还包括图形操作器，图形操作器为根据扩展参数更新目标选中框内的图形显示信息对应的图形数据的功能接口。参考图8，图8是图形数据的一种可选的具体更新和渲染流程图。如图8所示，图形数据的更新和渲染流程包括：
70.s1401、根据目标选中框的位置和尺寸，确定目标选中框内的图形显示信息对应的图形数据。
71.该步骤以图7中的矩形选中框1021和第一直线1011、第二直线1012和第三直线1013为例进行描述。此时，该步骤具体包括：
72.s14011、确定画板上的所有图形显示信息对应的图形数据；
73.s14012、调用图形计算器将目标选中框的位置和尺寸与该图形数据进行比较，确定目标选中框内的图形显示信息对应的图形数据，图形计算器为计算目标选中框内的图形显示信息对应的图形数据的功能接口。
74.示例性的，根据矩形选中框1021的四个顶点位置，确定矩形选中框1021对应的数据。此时画板20上的所有图形显示信息为第一直线1011、第二直线1012和第三直线1013，则获取这三条直线对应的图形数据。将矩形选中框1021的数据和第一直线1011、第二直线1012和第三直线1013的图形发送至图形计算器，由图形计算器确定位于矩形选中框1021中的直线。此时，可确定三条直线均位于矩形选中框1021内。具体的，当矩形选中框1021的尺寸和位置与画板20一致时，默认当前画板20上的所有图形显示信息均位于矩形选中框1021内。
75.s1402、调用图形操作器根据扩展参数，更新目标选中框内的图形显示信息对应的图形数据，图形操作器为根据扩展参数更新目标选中框内的图形显示信息对应的图形数据的功能接口。
76.示例性的，以图7中的矩形选中框1021和选中的第一直线1011、第二直线1012和第三直线1013为例进行描述。在确定矩形选中框1021中的三条直线后，从绘制数据库中获取对应的图形数据，将该图形数据发送至图形操作器。图形操作器根据放大参数，对图形数据进行相应的放大，并将放大后的图形数据存储至非绘制数据库中。
77.s1403、在预设的时间节点时，确定该图形数据对应的图形绘制工具，并获取图形绘制工具对应的图形渲染器。
78.s1404、调用图形渲染器将更新后的图形数据渲染成对应的图形显示信息，将图形显示信息呈现在画板上。
79.示例性的，以图7中的矩形选中框1021和第一直线1011、第二直线1012和第三直线
1013为例进行描述。根据第一直线1011、第二直线1012和第三直线1013对应的直线绘制工具，在渲染时间节点，获取非绘制数据库中的三条直线对应的放大后的直线数据，并将该直线数据发送至直线绘制工具对应的图形渲染器。图形渲染器根据放大后的直线数据，生成对应的直线显示信息。将直线显示信息呈现在画板20上，得到图9中的第四直线1014、第五直线1015和第六直线1016。
80.上述，本技术实施例通过确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据；调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示；确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数；调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。通过上述技术手段，通过图形绘制工具，实现图形的任意绘制，通过图形扩展工具，实现对画板上已有图形的任意扩展，通过这两种类型的图形工具可以满足大部分特殊图形的创建和交互。
81.实施例二：
82.图10是本技术实施例二提供的一种基于web画板的图形绘制方法的流程图。参考图10，基于web画板的图形绘制方法包括：
83.s210、确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据。
84.s220、调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示。
85.s230、确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数。
86.s240、调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。
87.步骤s210到s240具体实现过程可以参考步骤s110到s140。
88.s250、确定被选中的元素添加工具，并获取元素添加工具对应的第三行为引擎。
89.s260、获取检测到的添加行为数据，并调用第三行为引擎根据添加行为数据确定添加元素类型，第三行为引擎为根据添加行为数据确定添加元素类型，添加行为数据包括触摸位置。
90.具体的，第三行为引擎对应的功能接口连接添加元素确定模块，添加元素确定模块用于根据添加行为数据的触摸位置，确定该触摸位置对应的添加元素类型；其中，触摸位置和添加元素类型之间的对应关系为预先设定。
91.s270、根据添加元素类型，调用元素类型对应的原生元素接口获取被上传的文件，并将文件显示在画板上，元素类型包括文本和图片。
92.示例性的，参考图10,确定被选中的元素添加工具103，并获取元素添加工具对应的第三行为引擎。通过第三行为引擎确定用户添加的元素类型为图片。调用浏览器web自带的上传图片的原生元素接口，获取用户上传的图片1031，并将图片1031显示在画板20上。
93.上述，本技术实施例通过确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据；调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示；确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数；调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。通过上述技术手段，通过图形绘制工具，实现图形的任意绘制，通过图形扩展工具，实现对画板上已有图形的任意扩展，通过这两种类型的图形工具可以满足大部分特殊图形的创建和交互。通过元素添加工具，提供了与dom之类的原生元素进行交互的能力，解决了基于图形库的web画板无法与原生元素进行交互的问题。
94.实施例三
95.图12为本发明实施例三提供的一种基于web画板的图形绘制装置的结构示意图。参考图12，该基于web画板的图形绘制装置包括：第一行为数据获取模块31、第一图形绘制模块32、第二行为数据获取模块33和第二图形绘制模块34。
96.其中，第一行为数据获取模块31，被配置为确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据；
97.第一图形绘制模块32，被配置为调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示；
98.第二行为数据获取模块33，被配置为确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数；
99.第二图形绘制模块34，被配置为调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。
100.在上述实施例的基础上，第一行为数据模块31包括：图形绘制工具确定单元，用于确定被选中的图形绘制工具，并获取图形绘制工具对应的第一行为引擎；绘制行为数据获取单元，用于获取被检测到的绘制行为数据，绘制行为数据包括检测到的触摸位置、触摸时间、触摸面积和触摸路径中的一个或多个；第一行为引擎调用单元，用于调用第一行为引擎将绘制行为数据转换成图形数据，第一行为引擎为将绘制行为数据转换成图形数据的功能接口，图形数据包括图形尺寸、颜色、位置和层级中的一个或多个。
101.在上述实施例的基础上，第一图形绘制模块32包括：第一图形渲染器获取单元，用于在预设的时间节点，根据图形数据确定生成图形数据的图形绘制工具，并获取图形绘制工具对应的图形渲染器；第一图形渲染器调用单元，调用图形渲染器将图形数据渲染成对应的图形显示信息，并将图形显示信息显示在画板上，图形渲染器为将图形数据渲染成图形显示信息的功能接口。
102.在上述实施例的基础上，第二行为数据获取模块33包括：图形扩展工具确定单元，用于确定被选中的图形扩展工具，并获取图形扩展工具对应的第二行为引擎；扩展行为数据获取单元，用于获取被检测到的扩展行为数据，扩展行为数据包括检测到的触摸位置和触摸路径；第二行为引擎调用单元，用于调用第二行为引擎将扩展行为数据转换成扩展目
标和扩展参数，第二行为引擎为将扩展行为数据转换成扩展目标和扩展参数的功能接口，扩展目标为目标选中框，扩展目标对应的图形数据为位于目标选中框内的图形显示信息对应的图形数据。
103.在上述实施例的基础上，第二图形绘制模块34包括：图形数据确定单元，用于根据目标选中框的位置和尺寸，确定目标选中框内的图形显示信息对应的图形数据；图形操作器调用单元，用于调用图形操作器根据扩展参数，更新目标选中框内的图形显示信息对应的图形数据，图形操作器为根据扩展参数更新目标选中框内的图形显示信息对应的图形数据的功能接口；第二图形渲染器获取单元，用于在预设的时间节点时，确定该图形数据对应的图形绘制工具，并获取图形绘制工具对应的图形渲染器；第二图形渲染器调用单元，用于调用图形渲染器将更新后的图形数据渲染成对应的图形显示信息，将图形显示信息呈现在画板上。在上述实施例的基础上，基于web画板的图形绘制装置还包括元素添加模块，用于确定被选中的元素添加工具，并获取元素添加工具对应的第三行为引擎；获取检测到的添加行为数据，并调用第三行为引擎根据添加行为数据确定添加元素类型，第三行为引擎为根据添加行为数据确定添加元素类型，添加行为数据包括触摸位置；根据添加元素类型，调用元素类型对应的原生元素接口获取被上传的文件，并将文件显示在画板上，元素类型包括文本和图片。
104.上述，通过确定被选中的图形绘制工具，并获取检测到的绘制行为数据，调用图形绘制工具将绘制行为数据转换为对应的图形数据；调用图形数据对应的图形绘制工具生成图形数据对应的图形显示信息，并根据图形显示信息在画板上进行渲染显示；确定被选中的图形扩展工具，并获取检测到的扩展行为数据，调用图形扩展工具将扩展行为数据转换为对应的扩展目标和扩展参数；调用图形扩展工具根据扩展参数更新扩展目标对应的图形数据，并调用该图形数据对应的图形绘制工具生成更新后的图形数据对应的图形显示信息，根据图形显示信息在画板上进行渲染显示。通过上述技术手段，通过图形绘制工具，实现图形的任意绘制，通过图形扩展工具，实现对画板上已有图形的任意扩展，通过这两种类型的图形工具可以满足大部分特殊图形的创建和交互。
105.本发明实施例提供的基于web画板的图形绘制装置包含在基于web画板的图形绘制设备中，且可用于执行上述任意实施例提供的基于web画板的图形绘制方法，具备相应的功能和有益效果。
106.实施例四
107.图13为本发明实施例五提供的一种基于web画板的图形绘制设备的结构示意图。如图13所示，该基于web画板的图形绘制设备包括处理器40、存储器41、输入装置42、输出装置43以及显示屏44；基于web画板的图形绘制设备中处理器40的数量可以是一个或多个，图13中以一个处理器40为例；基于web画板的图形绘制设备中显示屏44的数量可以是一个或多个，图13中以一个显示屏44为例；基于web画板的图形绘制设备中的处理器40、存储器41、输入装置42、输出装置43以及显示屏44可以通过总线或其他方式连接，图13中以通过总线连接为例。
108.存储器41作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的基于web画板的图形绘制方法对应的程序指令/模块(例如，基于web画板的图形绘制装置中的第一行为数据获取模块31、第一图形绘制模块32、第
access memory,ram)、闪存(flash)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。
121.值得注意的是，上述基于web画板的图形绘制装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
122.注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。