基于SVG图形的时光轴绘制方法、系统及电子设备与流程

基于svg图形的时光轴绘制方法、系统及电子设备
技术领域
1.本发明涉及时光轴绘制技术领域，特别是涉及一种基于svg图形的时光轴绘制方法、系统及电子设备。


背景技术：

2.时光轴绘制的传统方法，侧重于针对服务器数据库中已维护的数据进行复杂的关系处理后再进行绘制展示，即只维护节点信息，通过程序将节点用线连接起来，不够灵活，不直观，同时这种模式不利于管理部门的维护，对临床医护人员的使用相对不友好。


技术实现要素：

3.鉴于此，本发明提供了一种基于svg图形的时光轴绘制方法、系统及电子设备。
4.为实现上述目的，本发明提供了如下方案：
5.第一方面，本发明提供了一种基于svg图形的时光轴绘制方法，包括：
6.获取目标流程；所述目标流程包括多个流程事件以及每个所述流程事件的事件流向；
7.采用svg，为目标流程构建一个空白画布；
8.根据所述目标流程中的流程事件，从元素库中选择相应的节点元素和文字元素，然后通过鼠标依次将相应的节点元素和文字元素拖入空白画布中，并放在相应位置处；
9.确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型；
10.根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，并对时光轴进行整体缩放和整体平移操作，然后将整体缩放和整体平移操作后的时光轴保存至数据库。
11.可选地，还包括：使用addeventlistener()方法来为节点元素添加mousemove事件的监听器；所述监听器用于当用户移动鼠标时自动调用回调函数，每次事件触发时自动记录当前鼠标的位置，并计算出鼠标当前位置与鼠标上一次位置之间的距离。
12.可选地，确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型，具体包括：
13.根据监听器，确定每个节点元素的位置信息；
14.根据每个节点元素的位置信息，确定任意两个节点元素的纵向距离；
15.当纵向距离为0时，相应两个节点元素的连线类型为直线；
16.当纵向距离不为0时，相应两个节点元素的连线类型为折线。
17.可选地，根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，具体包括：
18.根据连线类型，使用path元素中的d属性值，对相应的两个节点元素进行连线操作，形成完整的时光轴。
19.可选地，对时光轴进行整体缩放，具体包括：
20.通过scale变换函数，对时光轴进行整体缩放操作。
21.可选地，还包括：对所述节点元素添加拖拽操作、删除节点元素操作以及改变节点元素颜色操作；
22.对所述文字元素添加拖拽操作、删除节点元素操作以及改变节点元素颜色操作。
23.第二方面，本发明提供了一种基于svg图形的时光轴绘制系统，包括：
24.目标流程获取模块，用于获取目标流程；所述目标流程包括多个流程事件以及每个所述流程事件的事件流向；
25.空白画布创建模块，用于采用svg，为目标流程构建一个空白画布；
26.节点文字元素添加模块，用于根据所述目标流程中的流程事件，从元素库中选择相应的节点元素和文字元素，然后通过鼠标依次将相应的节点元素和文字元素拖入空白画布中，并放在相应位置处；
27.连线类型确定模块，用于确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型；
28.时光轴绘制保存模块，用于根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，并对时光轴进行整体缩放和整体平移操作，然后将整体缩放和整体平移操作后的时光轴保存至数据库。
29.第三方面，本发明提供了一种电子设备，包括存储器及处理器，所述存储器用于存储计算机程序，所述处理器运行所述计算机程序以使所述电子设备执行根据第一方面所述的基于svg图形的时光轴绘制方法。
30.根据本发明提供的具体实施例，本发明公开了以下技术效果：
31.本发明提供了非常友好的维护界面，可以让临床医护人员轻松地进行绘制、编辑和管理时光轴，直观并且实现所见即所得。同时为了增加灵活性，针对不同的流程事件，可以提供多个时光轴的维护，然后直接保存在数据库中，在展示时，只需从数据库读取读取即可，简化了传统程序的复杂处理。
附图说明
32.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
33.图1为本发明实施例提供的基于svg图形的时光轴绘制方法的流程示意图；
34.图2为本发明实施例提供的基于svg图形的时光轴绘制方法的整体示意图。
具体实施方式
35.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他
实施例，都属于本发明保护的范围。
36.为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。
37.实施例一
38.本实施例提供了一种基于svg图形的时光轴绘制方法，依据svg图形的基本属性以及图形标签，针对一条完整的流程，采用图形绘制的方式转化为一条时光轴，以适应流程的动态变化，并通过相关算法实现时光轴的拖拽与缩放。
39.如图1和图2所示，本实施例提供的一种基于svg图形的时光轴绘制方法，包括如下步骤。
40.步骤100：获取目标流程；所述目标流程包括多个流程事件以及每个所述流程事件的事件流向。
41.在本实施例中，首先要分析目标流程，了解其包含的流程事件及事件流向，进而绘制时光轴，其中，时光轴描述的是一个完整流程，包含的一系列流程事件及事件流向，通常以时间线展开。
42.步骤200：采用svg(scalablevectorgraphics，即可缩放矢量图形)为目标流程构建一个空白画布。
43.步骤300：根据所述目标流程中的流程事件，从元素库中选择相应的节点元素和文字元素，然后通过鼠标依次将相应的节点元素和文字元素拖入空白画布中，并放在相应位置处。
44.在本实施例中，元素库，指的是各种元素素材的集合，主要包括：节点元素、文字元素。
45.节点元素，代表的是时光轴中的一个流程事件。流程事件指的是在一个流程中发生的某个具体步骤或操作，例如提交申请、审批、拒绝等。这些流程事件通常会影响流程的整体进展和结果。节点元素在流程图中用来表示这些事件，可以帮助人们更清楚地理解和跟踪一个流程的执行过程。
46.文字元素，代表的是时光轴中的一个流程事件的描述说明，从元素库中选择一个文字元素拖入画布中，即可编写流程事件的文字说明。
47.进一步地，由于本实施例使用b/s架构(即浏览器和服务器架构模式)开发，故所有操作均在浏览器中完成，即从浏览器进入页面后，选中左侧元素库中的节点元素或者文字元素，鼠标按住拖动节点元素或者文字元素到空白画布中，松开鼠标，节点元素或者文字元素就会被放置在画布中。
48.由于采用svg图形实现，所以节点元素和文字元素的摆放位置只能在设定好的空白画布中，各个节点元素和文字元素的位置摆放则根据具体的流程事件来确定。
49.步骤400：确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型。
50.在本实施例中，通过拖拽操作，即原理是监听鼠标的移动距离，确定每个节点元素的位置信息。
51.在javascript中，可以使用addeventlistener()方法来为元素添加mousemove事件的监听器，该监听器用于当用户移动鼠标时就会自动调用回调函数，每次事件触发时，都
会记录当前鼠标的位置，并计算出它与上一次位置之间的距离。
52.其中javascript是一种脚本编程语言，常用于web页面的客户端脚本编程，可以实现动态效果和用户交互，该语言广泛应用于开发各种类型的web应用程序、桌面应用程序和移动应用程序等。mousemove事件在web开发中，通常用于实现与鼠标相关的交互效果，比如拖拽、画图、放大镜等等。
53.其中，计算横纵距离的公式为：
54.x＝disx-x+ex；
55.y＝disy-y+ey；
56.disx表示的是节点元素拖拽移动之后终点位置的横坐标，x是节点元素初始位置横坐标，两者之间的差值即为节点元素移动的横向距离。disy和y同理，disy表示的是节点元素拖拽移动之后终点位置的纵坐标，y是节点元素初始位置纵坐标，两者之间的差值即为节点元素移动的纵向距离。而由于在拖拽过程中鼠标按住节点元素的坐标位置与实际节点元素的中心坐标位置会有所偏差，所以需要加上节点元素中心位置的横坐标ex和纵坐标ey，以此避免拖拽后节点元素位置偏移带来的误差。
57.通过比较节点元素拖拽移动之后终点位置的纵坐标和节点元素拖拽移动之前初始位置的纵坐标，如果二者相等则是直线，如果不等则是折线；
58.步骤500：根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，并对时光轴进行整体缩放和整体平移操作，然后将整体缩放和整体平移操作后的时光轴保存至数据库。
59.两个节点元素之间可以进行连线操作，连接线代表的是2个流程事件间的一个流向，实现过程使用path元素中的d属性值来绘制出直线/折线，其中，path元素是用来定义形状的svg通用元素，所有的基本形状都可以用path元素来创建，d属性则表示用来定义绘制路径的命令，d是draw的缩写，及绘制的意思，d属性可以有四个值，例如m11l22，也可以有六个值，例如m11l22l32，两个值为一组，一组相当于一个坐标，m代表起点，l代表终点；
60.对时光轴进行整体放缩，即通过scale变换函数进行放大缩小处理，scale变换函数是指通过x和y指定一个等比例放大缩小操作，x表示水平方向缩放倍数，y表示垂直方向缩放倍数，缩放倍数大于1为放大，缩放倍数小于1即为缩小，如果y没有被提供，那么假定为等同于x。
61.对时光轴进行整体平移，在拖拽操作的基础上，计算所有元素的移动距离，然后给每个元素动态设置横坐标和纵坐标；
62.x＝disx-x+ex(1，2，
…
)；
63.y＝disx-y+ex(1，2，
…
)；
64.最后将整个画布以html(hypertextmarkuplanguage，即超文本标记语言)格式存入数据库中。
65.进一步地，本实施例提供的方法还包括：对所述节点元素添加拖拽操作、删除节点元素操作以及改变节点元素颜色操作等。
66.对所述文字元素添加拖拽操作、删除节点元素操作以及改变节点元素颜色操作等。
67.实施例二
68.为了执行上述实施例一对应的方法，以实现相应的功能和技术效果，下面提供一种基于svg图形的时光轴绘制系统。
69.该系统包括：目标流程获取模块，用于获取目标流程；所述目标流程包括多个流程事件以及每个所述流程事件的事件流向。
70.空白画布创建模块，用于采用svg，为目标流程构建一个空白画布。
71.节点文字元素添加模块，用于根据所述目标流程中的流程事件，从元素库中选择相应的节点元素和文字元素，然后通过鼠标依次将相应的节点元素和文字元素拖入空白画布中，并放在相应位置处。
72.连线类型确定模块，用于确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型。
73.时光轴绘制保存模块，用于根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，并对时光轴进行整体缩放和整体平移操作，然后将整体缩放和整体平移操作后的时光轴保存至数据库。
74.实施例三
75.本发明实施例提供一种电子设备包括存储器及处理器，该存储器用于存储计算机程序，该处理器运行计算机程序以使电子设备执行实施例一的基于svg图形的时光轴绘制方法。
76.可选地，上述电子设备可以是服务器。
77.本发明针对不同的流程事件，根据这种svg图形绘制时光轴的方法，为临床医护人员提供了一种高效且易操作的维护方式，并且所见即所得；这一效果的实现是通过使用svg(可缩放矢量图形)技术来绘制时光轴图形，并结合javascript等技术实现交互和动态效果。详细实现过程如下：
78.(1)利用svg绘制时光轴图形，包括时间轴、事件节点、文本等元素；
79.(2)使用javascript等技术实现事件节点的动态变化，比如鼠标悬停时出现弹出窗口显示事件详细信息等；
80.(3)给每个事件节点添加事件处理程序，实现对事件的修改、删除等操作；
81.(4)在后台数据库中保存时光轴数据，通过ajax等技术实现前后端数据交互，实现动态更新和保存修改；
82.通过以上步骤，就能实现所见即所得的高效易操作的时光轴维护方式。
83.当流程事件出现新的变化时，可通过图形绘制的方式调整相应的时光轴，以适应流程的动态变化，体现了高可用性和灵活性。这一效果的实现是：
84.(1)根据新的流程事件或变化，可以在画布中直接调整相应的事件节点，并在流程图中标明变化的位置和影响范围；
85.(2)对于涉及到的流程步骤、数据等，进行相应的修改和更新；
86.(3)审核修改后的流程图，并及时通知相关人员，确保他们了解变化和相应的操作步骤。
87.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统
而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
88.本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

技术特征：
1.一种基于svg图形的时光轴绘制方法，其特征在于，包括：获取目标流程；所述目标流程包括多个流程事件以及每个所述流程事件的事件流向；采用svg，为目标流程构建一个空白画布；根据所述目标流程中的流程事件，从元素库中选择相应的节点元素和文字元素，然后通过鼠标依次将相应的节点元素和文字元素拖入空白画布中，并放在相应位置处；确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型；根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，并对时光轴进行整体缩放和整体平移操作，然后将整体缩放和整体平移操作后的时光轴保存至数据库。2.根据权利要求1所述的一种基于svg图形的时光轴绘制方法，其特征在于，还包括：使用addeventlistener()方法来为节点元素添加mousemove事件的监听器；所述监听器用于当用户移动鼠标时自动调用回调函数，每次事件触发时自动记录当前鼠标的位置，并计算出鼠标当前位置与鼠标上一次位置之间的距离。3.根据权利要求2所述的一种基于svg图形的时光轴绘制方法，其特征在于，确定每个节点元素的位置信息，并根据每个节点元素的位置信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型，具体包括：根据监听器，确定每个节点元素的位置信息；根据每个节点元素的位置信息，确定任意两个节点元素的纵向距离；当纵向距离为0时，相应两个节点元素的连线类型为直线；当纵向距离不为0时，相应两个节点元素的连线类型为折线。4.根据权利要求1所述的一种基于svg图形的时光轴绘制方法，其特征在于，根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，具体包括：根据连线类型，使用path元素中的d属性值，对相应的两个节点元素进行连线操作，形成完整的时光轴。5.根据权利要求1所述的一种基于svg图形的时光轴绘制方法，其特征在于，对时光轴进行整体缩放，具体包括：通过scale变换函数，对时光轴进行整体缩放操作。6.根据权利要求1所述的一种基于svg图形的时光轴绘制方法，其特征在于，还包括：对所述节点元素添加拖拽操作、删除节点元素操作以及改变节点元素颜色操作；对所述文字元素添加拖拽操作、删除节点元素操作以及改变节点元素颜色操作。7.一种基于svg图形的时光轴绘制系统，其特征在于，包括：目标流程获取模块，用于获取目标流程；所述目标流程包括多个流程事件以及每个所述流程事件的事件流向；空白画布创建模块，用于采用svg，为目标流程构建一个空白画布；节点文字元素添加模块，用于根据所述目标流程中的流程事件，从元素库中选择相应的节点元素和文字元素，然后通过鼠标依次将相应的节点元素和文字元素拖入空白画布中，并放在相应位置处；连线类型确定模块，用于确定每个节点元素的位置信息，并根据每个节点元素的位置
信息确定任意两个节点元素的纵向距离，然后根据纵向距离确定两个节点元素的连线类型；时光轴绘制保存模块，用于根据连线类型，对相应的两个节点元素进行连线操作，形成完整的时光轴，并对时光轴进行整体缩放和整体平移操作，然后将整体缩放和整体平移操作后的时光轴保存至数据库。8.一种电子设备，其特征在于，包括存储器及处理器，所述存储器用于存储计算机程序，所述处理器运行所述计算机程序以使所述电子设备执行根据权利要求1至6中任一项所述的基于svg图形的时光轴绘制方法。

技术总结
本发明公开了一种基于SVG图形的时光轴绘制方法、系统及电子设备，涉及时光轴绘制技术领域，该方法包括：首先采用SVG为目标流程构建一个空白画布；其次根据目标流程，从元素库中选择相应的节点元素和文字元素添加至空白画布中；然后确定两个节点元素的连线类型并进行连线操作，形成完整的时光轴；最后对时光轴进行整体缩放和整体平移操作，然后将处理后的时光轴保存至数据库。本发明能够简化了传统程序的复杂处理，轻松地进行绘制、编辑和管理时光轴。轴。轴。


技术研发人员：张岩杰
受保护的技术使用者：南京海泰医疗信息系统有限公司
技术研发日：2023.06.01
技术公布日：2023/10/7