一种工作流图形的绘制方法及装置与流程

1.本发明涉及计算机技术领域，尤其涉及一种工作流图形的绘制方法及装置。


背景技术：

2.在互联网平台中，许多业务系统常常需要展示各种布局多变的图形，这些图形中节点内容丰富，某些类型节点中甚至需要显示时间轴和表格等复杂信息。此时使用常规的html标签元素绘制的图形已无法满足业务系统的显示需求，因此需要借助svg元素绘制更为复杂的图形。
3.由于使用svg元素绘制结构性复杂的图形时需要对svg元素进行一定程度的渲染封装，当html标签元素直接嵌入svg元素中进行渲染封装时，得到的图形并不能正常显示html标签元素中的节点内容。为解决这一难题，目前惯用的绘制方式是在svg元素中添加foreign元素，再将html标签元素嵌入foreign元素中，然后对svg元素进行渲染封装，这种绘制方式得到的图形可能会存在部分节点内容显示不正常的问题，从而导致结构性复杂的图形无法被正常绘制。


技术实现要素：

4.有鉴于此，本发明实施例提供一种工作流图形的绘制方法及装置，以解决结构性复杂的图形无法被正常绘制的问题。
5.为实现上述目的，本发明实施例提供如下技术方案：
6.本发明第一方面公开一种工作流图形的绘制方法，所述方法包括：
7.接收并存储待绘制工作流的工作流数据；
8.遍历所述工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息；
9.根据每个所述节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点；
10.根据每个节点的所述节点信息，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标；
11.遍历所述工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息，所述联结线用于在预设的svg画布中连接各个所述渲染后的节点；
12.基于每条所述联结线对应的联结线信息和每个所述节点对应的几何结构的中心坐标，在所述svg画布中绘制所有所述联结线，得到渲染后的svg画布；
13.将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形。
14.优选的，所述根据每个所述节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点，包括：
15.针对每个所述节点包含的节点信息，判断所述节点信息对应的数据量是否大于预
设值；
16.若所述节点信息对应的数据量大于预设值，将所述节点信息相应的节点渲染为复杂结构的节点；
17.若所述节点信息对应的数据量不大于预设值，将所述节点信息相应的节点渲染为简单结构的节点。
18.优选的，所述根据每个节点的所述节点信息，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标，包括：
19.根据每个所述节点的所述节点信息对应的数据量，确定每个所述节点在所述svg画布中的几何结构；
20.依据每个所述节点的所述节点信息，确定各个所述节点之间的关联关系；
21.基于每个所述节点对应的几何结构，和各个所述节点之间的关联关系，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标。
22.优选的，所述将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形，包括：
23.在所述渲染后的svg画布中，每个所述中心坐标处添加用于嵌套所述渲染后的节点的外部元素；
24.将各个所述渲染后的节点嵌入对应的所述外部元素中，得到待绘制工作流对应的工作流图形。
25.优选的，将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形之后，还包括：
26.根据所述渲染后的svg画布的尺寸和每个所述节点在svg画布中的几何结构，调整所述待绘制工作流对应的工作流图形，以使各个所述渲染后的节点在所述渲染后的svg画布中水平居中显示。
27.本发明第二方面公开一种工作流图形的绘制装置，所述装置包括：
28.存储单元，用于接收并存储待绘制工作流的工作流数据；
29.节点确定单元，用于遍历所述工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息；
30.节点渲染单元，用于根据每个所述节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点；
31.计算单元，用于根据每个节点的所述节点信息，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标；
32.联结线确定单元，用于遍历所述工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息，所述联结线用于在预设的svg画布中连接各个所述渲染后的节点；
33.画布渲染单元，用于基于每条所述联结线对应的联结线信息和每个所述节点对应的几何结构的中心坐标，在所述svg画布中绘制所有所述联结线，得到渲染后的svg画布；
34.嵌入单元，用于将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形。
35.优选的，所述节点渲染单元包括：
36.判断模块，用于针对每个所述节点包含的节点信息，判断所述节点信息对应的数据量是否大于预设值；
37.第一渲染模块，用于若所述节点信息对应的数据量大于预设值，将所述节点信息相应的节点渲染为复杂结构的节点；
38.第二渲染模块，用于若所述节点信息对应的数据量不大于预设值，将所述节点信息相应的节点渲染为简单结构的节点。
39.优选的，所述计算单元包括：
40.第一确定模块，用于根据每个所述节点的所述节点信息对应的数据量，确定每个所述节点在所述svg画布中的几何结构；
41.第二确定模块，用于依据每个所述节点的所述节点信息，确定各个所述节点之间的关联关系；
42.计算模块，用于基于每个所述节点对应的几何结构，和各个所述节点之间的关联关系，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标。
43.优选的，所述嵌入单元包括：
44.添加模块，用于在所述渲染后的svg画布中，每个所述中心坐标处添加用于嵌套所述渲染后的节点的外部元素；
45.嵌入模块，用于将各个所述渲染后的节点嵌入对应的所述外部元素中，得到待绘制工作流对应的工作流图形。
46.优选的，所述装置还包括：
47.调整单元，用于根据所述渲染后的svg画布的尺寸和每个所述节点在svg画布中的几何结构，调整所述待绘制工作流对应的工作流图形，以使各个所述渲染后的节点在所述渲染后的svg画布中水平居中显示。
48.基于上述本发明实施例提供的一种工作流图形的绘制方法及装置，接收并存储待绘制工作流的工作流数据；遍历工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息；根据每个节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点；根据每个节点的节点信息，计算每个节点对应的几何结构在svg画布中的中心坐标；遍历工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息；基于每条联结线对应的联结线信息和每个节点对应的几何结构的中心坐标，在svg画布中绘制所有联结线，得到渲染后的svg画布；将各个渲染后的节点嵌入渲染后的svg画布中，得到待绘制工作流对应的工作流图形。使节点在svg画布外根据节点信息进行渲染，svg画布根据所有联结线和联结线信息进行渲染，将各自渲染完成的节点和svg画布进行拼接嵌套，得到可以正常显示的工作流图形，解决了结构性复杂的图形无法被正常绘制的难题。
附图说明
49.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
50.图1为本发明实施例提供的一种工作流图形的绘制方法的流程图；
51.图2为本发明实施例提供的工作流图形示意图；
52.图3为本发明实施例提供的一种工作流图形的绘制装置的结构框图。
具体实施方式
53.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
54.在本技术中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
55.由背景技术可知，目前在svg元素中添加foreign元素，再将html标签元素嵌入foreign元素中，然后对svg元素进行渲染封装的图形绘制方法，无法正常绘制出结构性复杂的图形。
56.因此，本发明实施例提供一种工作流图形的绘制方法及装置，接收并存储待绘制工作流的工作流数据；根据工作流数据中包含的节点数据中每个节点的节点信息，对相应的节点进行结构渲染；计算每个节点对应的几何结构在svg画布中的中心坐标；基于工作流数据中每条联结线对应的联结线信息和每个中心坐标，在svg画布中绘制所有联结线，得到渲染后的svg画布；将各个渲染后的节点嵌入渲染后的svg画布中，得到待绘制工作流对应的工作流图形。使节点在svg画布外根据节点信息进行渲染，svg画布根据所有联结线和联结线信息进行渲染，将各自渲染完成的节点和svg画布进行拼接嵌套，得到以正常显示的工作流图形，解决了结构性复杂的图形无法被正常绘制的难题。
57.参见图1，示出了本发明实施例提供的一种工作流图形的绘制方法的流程图。
58.需要说明的是，本发明实施例提供的工作流图形的绘制方法应用于客户端，在该绘制方法中定义了一套绘制规则，适用于对多样性的数据进行统一绘制。在该绘制方法中采用d3和dagre-d3，在svg元素中绘制由vue组件或react实现的组件，组成的结构性复杂的工作流图形。
59.其中，d3是一个javascript库，用于基于数据操作文档。dagre是一个能够在客户端轻松创建流程图的javascript类库，而dagre-d3可以理解为是dagre的前端，它使用d3来进行渲染。vue组件是一款用于构建用户界面的javascript框架。它基于标准html、css和javascript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。
60.该工作流图形的绘制方法包括：
61.s101：接收并存储待绘制工作流的工作流数据。
62.在具体实现步骤s101的过程中，当接收到服务端发送的待绘制工作流的工作流数据时，将本地持久化的数据进行重置，以存储当前接收到的待绘制工作流的工作流数据。
63.可以理解的是，待绘制工作流的工作流数据中包含但不限于工作流内容、工作流
状态数据、工作流节点数据和工作流联结线数据。
64.需要说明的是，将本地持久化的数据进行重置可以理解为将客户端的svg画布中绘制的图形和内容进行清空，以便在空白的svg画布中绘制新内容。
65.s102：遍历工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息。
66.在具体实现步骤s102的过程中，遍历工作流数据中包含的工作流节点数据，确定工作流节点数据中所有节点，以及每个节点对应的节点信息。
67.需要说明的是，工作流数据中的工作流节点数据可以是以数组形式存储。节点信息的具体表现形式可参见图2所示。节点1的节点信息包含“企业经办发起融资申请和2022-12-2518:49:56”；节点2的节点信息包含“已跳过资料整理无需上传资料”；节点3的节点信息包含“企业主管签约、发送应收账款信息、平台同步账款、发送融资申请、企业主管审核、企业主管出海签约”；节点4的节点信息包含“文件传输”；节点5的节点信息包含“资金方审核”；节点6的节点信息包含“资金方放款”；节点7的节点信息包含“扣费”。
68.可以理解的是，工作流节点数据中还包括节点类型数据，根据业务可将节点类型划分为waiting类型、running类型、fail类型和complete类型；在工作流图形中，根据节点的颜色不同，区分不同的节点类型。
69.s103：根据每个节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点。
70.在具体实现步骤s103的过程中，根据每个节点的节点信息所对应的数据量，对相应的节点进行结构渲染，以得到各个渲染后的节点。具体而言，针对每个节点包含的节点信息，判断节点信息对应的数据量是否大于预设值(例如字数为20个字)。节点信息对应的数据量大于预设值，将节点信息相应的节点渲染为复杂结构的节点；若节点信息对应的数据量不大于预设值，将节点信息相应的节点渲染为简单结构的节点。
71.例如：参见图2示出的节点1和节点2，其中节点1的节点信息对应的数据量不大于预设值，则节点1渲染为简单结构的节点；节点2的节点信息对应的数据量大于预设值，则节点2渲染为复杂结构的节点。
72.s104：根据每个节点的节点信息，计算每个节点对应的几何结构在svg画布中的中心坐标。
73.在具体实现步骤s104的过程中，确定每个节点的节点信息所对应的数据量，根据数据量确定每个节点的几何结构(几何结构可参见图2示出的每个节点对应的圆角矩形框)，利用dagre-d3或其他工具计算每个节点的几何结构在svg画布中的中心坐标。
74.具体而言，根据每个节点的节点信息对应的数据量，确定每个节点在svg画布中的几何结构；依据每个节点的节点信息，确定各个节点之间的关联关系；基于每个节点对应的几何结构，和各个节点之间的关联关系，计算每个节点对应的几何结构在svg画布中的中心坐标。
75.可以理解的是，每个节点的几何结构由节点信息对应的数据量决定。各个节点之间的关联关系可参见图2示出的内容，例如：节点1关联节点2和节点3；节点2关联节点4；节点3和节点4分别关联节点5；节点5关联节点6；节点6关联节点7。
76.需要说明的是，根据每个节点对应的几何结构，和各个节点之间的关联关系，计算
每个节点对应的几何结构在svg画布中的中心坐标，目的是使各个节点在工作流图形中显示得更加协调。
77.s105：遍历工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息。
78.在具体实现步骤s105的过程中，遍历工作流数据中包含的工作流联结线数据，确定工作流联结线数据中所有联结线，以及每条联结线对应的联结线信息。
79.需要说明的是，工作流数据中的工作流联结线数据可以是数组形式；联结线信息包括但不限于联结线方向信息和联结线属性信息。
80.可以理解的是，联结线用于在预设的svg画布中连接各个渲染后的节点。
81.s106：基于每条联结线对应的联结线信息和每个节点对应的几何结构的中心坐标，在svg画布中绘制所有联结线，得到渲染后的svg画布。
82.在具体实现步骤s106的过程中，基于每条联结线对应的联结线方向信息、联结线属性信息和每个节点对应的几何结构的中心坐标，在svg画布中绘制所有联结线，得到渲染后的svg画布。
83.可以理解的是，联结线在svg画布中的表现形式可参见图2中示出的联结线01、联结线02、联结线03、联结线04、联结线05、联结线06和联结线07。
84.需要说明的是，为了更清楚地解释联结线方向信息和联结线属性信息。
85.下面结合图2示出的内容进行举例说明：
86.联结线01的联结线方向信息为联结线01从节点1指向节点3，联结线01的联结线属性信息为弧线属性。
87.联结线02的联结线方向信息为联结线02从节点1指向节点2，联结线02的联结线属性信息为弧线属性。
88.联结线03的联结线方向信息为联结线03从节点2指向节点4，联结线03的联结线属性信息为直线属性。
89.联结线04的联结线方向信息为联结线04从节点4指向节点5，联结线04的联结线属性信息为弧线属性。
90.联结线05的联结线方向信息为联结线05从节点3指向节点5，联结线03的联结线属性信息为弧线属性。
91.联结线06的联结线方向信息为联结线06从节点5指向节点6，联结线06的联结线属性信息为直线属性。
92.联结线07的联结线方向信息为联结线07从节点6指向节点7，联结线07的联结线属性信息为直线属性。
93.需要说明的是，步骤s101至步骤s103为节点渲染的相关实现内容；步骤s104至步骤s106为svg画布渲染的相关实现内容。节点渲染和svg画布渲染为异步实现，不存在绝对的先后渲染顺序，在本发明实施例中所阐述的实现过程仅用于解释说明，不对渲染顺序作具体限制。
94.s107：将各个渲染后的节点嵌入渲染后的svg画布中，得到待绘制工作流对应的工作流图形。
95.在具体实现步骤s107的过程中，在各个节点渲染完成，且svg画布渲染完成之后，
将所有渲染后的节点嵌入渲染后的svg画布中，得到待绘制工作流对应的工作流图形(例如图2所示)。
96.具体而言，在渲染后的svg画布中，每个中心坐标处添加用于嵌套渲染后的节点的外部元素(例如foreign元素)；将各个渲染后的节点嵌入对应的外部元素中，得到待绘制工作流对应的工作流图形。
97.需要说明的是，foreign元素中嵌套渲染后的节点，可以实现保留节点对应的响应式功能的目的。也就是说，若节点结构中存在响应式功能(例如dom节点结构存在响应点击操作的功能)，将渲染后的节点嵌入foreign元素后，仍能实现响应式功能。
98.在一些具体实施例中，根据渲染后的svg画布的尺寸和每个节点在svg画布中的几何结构，调整待绘制工作流对应的工作流图形，以使各个渲染后的节点在渲染后的svg画布中水平居中显示。其中，每个节点在svg画布中的几何结构的高度，由节点信息和联结线的高度组成。
99.在本发明实施例中，节点独立于svg画布，基于节点信息进行渲染，svg画布根据所有联结线和联结线信息进行渲染，将各自渲染完成的节点和svg画布进行拼接嵌套，得到可以正常显示的工作流图形，解决了结构性复杂的图形无法被正常绘制的难题。
100.与上述本发明实施例提供的一种工作流图形的绘制方法相对应，参见图3，示出了本发明实施例提供的一种工作流图形的绘制装置的结构框图，该绘制装置包括：存储单元301、节点确定单元302、节点渲染单元303、计算单元304、联结线确定单元305、画布渲染单元306和嵌入单元307。
101.存储单元301，用于接收并存储待绘制工作流的工作流数据。
102.节点确定单元302，用于遍历工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息。
103.节点渲染单元303，用于根据每个节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点。
104.计算单元304，用于根据每个节点的节点信息，计算每个节点对应的几何结构在svg画布中的中心坐标。
105.联结线确定单元305，用于遍历工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息，联结线用于在预设的svg画布中连接各个渲染后的节点。
106.画布渲染单元306，用于基于每条联结线对应的联结线信息和每个节点对应的几何结构的中心坐标，在svg画布中绘制所有联结线，得到渲染后的svg画布。
107.嵌入单元307，用于将各个渲染后的节点嵌入渲染后的svg画布中，得到待绘制工作流对应的工作流图形。
108.在本发明实施例中，节点独立于svg画布，基于节点信息进行渲染，svg画布根据所有联结线和联结线信息进行渲染，将各自渲染完成的节点和svg画布进行拼接嵌套，得到可以正常显示的工作流图形，解决了结构性复杂的图形无法被正常绘制的难题。
109.优选的，结合图3示出的内容，节点渲染单元303包括判断模块、第一渲染模块和第二渲染模块，各个模块的实现原理如下：
110.判断模块，用于针对每个节点包含的节点信息，判断节点信息对应的数据量是否
大于预设值。
111.第一渲染模块，用于若节点信息对应的数据量大于预设值，将节点信息相应的节点渲染为复杂结构的节点。
112.第二渲染模块，用于若节点信息对应的数据量不大于预设值，将节点信息相应的节点渲染为简单结构的节点。
113.优选的，结合图3示出的内容，计算单元304包括第一确定模块、第二确定模块和计算模块，各个模块的实现原理如下：
114.第一确定模块，用于根据每个节点的节点信息对应的数据量，确定每个节点在svg画布中的几何结构。
115.第二确定模块，用于依据每个节点的节点信息，确定各个节点之间的关联关系。
116.计算模块，用于基于每个节点对应的几何结构，和各个节点之间的关联关系，计算每个节点对应的几何结构在svg画布中的中心坐标。
117.优选的，结合图3示出的内容，嵌入单元307包括添加模块和嵌入模块，各个模块的实现原理如下：
118.添加模块，用于在渲染后的svg画布中，每个中心坐标处添加用于嵌套渲染后的节点的外部元素。
119.嵌入模块，用于将各个渲染后的节点嵌入对应的外部元素中，得到待绘制工作流对应的工作流图形。
120.优选的，结合图3示出的内容，该绘制装置还包括：调整单元，用于根据渲染后的svg画布的尺寸和每个节点在svg画布中的几何结构，调整待绘制工作流对应的工作流图形，以使各个渲染后的节点在渲染后的svg画布中水平居中显示。
121.综上所述，本发明实施例提供一种工作流图形的绘制方法及装置，使节点在svg画布外根据节点信息进行渲染，svg画布根据所有联结线和联结线信息进行渲染，将各自渲染完成的节点和svg画布进行拼接嵌套，得到可以正常显示的工作流图形，解决了结构性复杂的图形无法被正常绘制的难题。
122.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
123.专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
124.对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

技术特征：
1.一种工作流图形的绘制方法，其特征在于，所述方法包括：接收并存储待绘制工作流的工作流数据；遍历所述工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息；根据每个所述节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点；根据每个节点的所述节点信息，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标；遍历所述工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息，所述联结线用于在预设的svg画布中连接各个所述渲染后的节点；基于每条所述联结线对应的联结线信息和每个所述节点对应的几何结构的中心坐标，在所述svg画布中绘制所有所述联结线，得到渲染后的svg画布；将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形。2.根据权利要求1所述的方法，其特征在于，所述根据每个所述节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点，包括：针对每个所述节点包含的节点信息，判断所述节点信息对应的数据量是否大于预设值；若所述节点信息对应的数据量大于预设值，将所述节点信息相应的节点渲染为复杂结构的节点；若所述节点信息对应的数据量不大于预设值，将所述节点信息相应的节点渲染为简单结构的节点。3.根据权利要求1所述的方法，其特征在于，所述根据每个节点的所述节点信息，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标，包括：根据每个所述节点的所述节点信息对应的数据量，确定每个所述节点在所述svg画布中的几何结构；依据每个所述节点的所述节点信息，确定各个所述节点之间的关联关系；基于每个所述节点对应的几何结构，和各个所述节点之间的关联关系，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标。4.根据权利要求1所述的方法，其特征在于，所述将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形，包括：在所述渲染后的svg画布中，每个所述中心坐标处添加用于嵌套所述渲染后的节点的外部元素；将各个所述渲染后的节点嵌入对应的所述外部元素中，得到待绘制工作流对应的工作流图形。5.根据权利要求1所述的方法，其特征在于，将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形之后，还包括：根据所述渲染后的svg画布的尺寸和每个所述节点在svg画布中的几何结构，调整所述待绘制工作流对应的工作流图形，以使各个所述渲染后的节点在所述渲染后的svg画布中水平居中显示。
6.一种工作流图形的绘制装置，其特征在于，所述装置包括：存储单元，用于接收并存储待绘制工作流的工作流数据；节点确定单元，用于遍历所述工作流数据中包含的节点数据，确定所有节点，以及对应每个节点的节点信息；节点渲染单元，用于根据每个所述节点的节点信息，对相应的节点进行结构渲染得到各个渲染后的节点；计算单元，用于根据每个节点的所述节点信息，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标；联结线确定单元，用于遍历所述工作流数据中包含的联结线数据，确定所有联结线，以及每条联结线对应的联结线信息，所述联结线用于在预设的svg画布中连接各个所述渲染后的节点；画布渲染单元，用于基于每条所述联结线对应的联结线信息和每个所述节点对应的几何结构的中心坐标，在所述svg画布中绘制所有所述联结线，得到渲染后的svg画布；嵌入单元，用于将各个所述渲染后的节点嵌入所述渲染后的svg画布中，得到待绘制工作流对应的工作流图形。7.根据权利要求6所述的装置，其特征在于，所述节点渲染单元包括：判断模块，用于针对每个所述节点包含的节点信息，判断所述节点信息对应的数据量是否大于预设值；第一渲染模块，用于若所述节点信息对应的数据量大于预设值，将所述节点信息相应的节点渲染为复杂结构的节点；第二渲染模块，用于若所述节点信息对应的数据量不大于预设值，将所述节点信息相应的节点渲染为简单结构的节点。8.根据权利要求6所述的装置，其特征在于，所述计算单元包括：第一确定模块，用于根据每个所述节点的所述节点信息对应的数据量，确定每个所述节点在所述svg画布中的几何结构；第二确定模块，用于依据每个所述节点的所述节点信息，确定各个所述节点之间的关联关系；计算模块，用于基于每个所述节点对应的几何结构，和各个所述节点之间的关联关系，计算每个所述节点对应的几何结构在所述svg画布中的中心坐标。9.根据权利要求6所述的装置，其特征在于，所述嵌入单元包括：添加模块，用于在所述渲染后的svg画布中，每个所述中心坐标处添加用于嵌套所述渲染后的节点的外部元素；嵌入模块，用于将各个所述渲染后的节点嵌入对应的所述外部元素中，得到待绘制工作流对应的工作流图形。10.根据权利要求6所述的装置，其特征在于，所述装置还包括：调整单元，用于根据所述渲染后的svg画布的尺寸和每个所述节点在svg画布中的几何结构，调整所述待绘制工作流对应的工作流图形，以使各个所述渲染后的节点在所述渲染后的svg画布中水平居中显示。

技术总结
本发明提供一种工作流图形的绘制方法及装置，在该方法中，接收并存储待绘制工作流的工作流数据；根据工作流数据中包含的节点数据中每个节点的节点信息，对相应的节点进行结构渲染；计算每个节点对应的几何结构在svg画布中的中心坐标；基于工作流数据中每条联结线对应的联结线信息和每个中心坐标，在svg画布中绘制所有联结线，得到渲染后的svg画布；将各个渲染后的节点嵌入渲染后的svg画布中，得到待绘制工作流对应的工作流图形。节点和svg画布分开进行渲染，然后将各自渲染完成的节点和svg画布拼接嵌套，得到可以正常显示的工作流图形，解决了结构性复杂的图形无法被正常绘制的难题。的难题。的难题。


技术研发人员：叶子龙 李朕
受保护的技术使用者：北京商银微芯科技有限公司
技术研发日：2023.05.24
技术公布日：2023/8/23