CN115904152A - 一种基于html5的流程图绘制方法、装置、设备及存储介质 - Google Patents

Abstract

本发明公开了一种基于HTML5的流程图绘制方法、装置、设备及存储介质，涉及图形绘制技术领域。所述方法是在将流程图显示数据初始绘制到HTML5画布上后，为所述HTML5画布绑定可基于HTML5的事件传播机制来捕捉到内部元素的鼠标按下事件、鼠标移动事件和鼠标松开事件，并通过这三事件来使得在节点拖动时，会在流程图上绘制一个被拖动节点的轮廓来反映用户的拖动，并确保实际的节点与出口不进行重绘，而当用户拖动完成后，如果位置发生变化，则真实被拖动的节点才移动到被拖动的新位置，并重算出口和重绘部分区域流程图，进而使得一次完整的拖动只进行一次计算和重绘，避免出现拖动卡顿现象，可带来极大的性能提升和极高用户体验。

Description

一种基于HTML5的流程图绘制方法、装置、设备及存储介质

技术领域

本发明属于图形绘制技术领域，具体涉及一种基于HTML5的流程图绘制方法、装置、设备及存储介质。

背景技术

HTML5(即HyperText Markup Language 5的缩写)是构建Web内容的一种语言描述方式，其作为互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。基于HTML5图形绘制技术的流程图主要包含有节点(即步骤)和出口(即节点与节点之间的连线)两大元素，其中，节点又分为创建节点、审批节点和只读节点，不同类型节点在图形和大小上有一定的差异，节点与节点之间通过出口连接。

现有基于HTML5图形绘制程序的流程图，在用户拖动节点时，会通过监听节点移动事件的方法，捕捉节点移动轨迹，重算该节点所连接的出口的位置，然后重新绘制流程图，该节点移动事件在拖动过程中会一直按照某种固定的频率触发，导致浪费大量的客户端计算能力，从而导致拖动卡顿，更甚者导致浏览器卡死。另外，现有基于HTML5图形绘制程序的流程图，不区分节点类型，节点图形都以空心菱形为主，是否走过节点和出口也未有明显的标志，由此导致用户无法直观的从流程图上查看各个节点类型和已走过、未走过和当前停留的节点，从而导致用户体验大打折扣。

发明内容

本发明的目的是提供一种基于HTML5的流程图绘制方法、装置、计算机设备及计算机可读存储介质，用以解决现有流程图绘制方案所存在拖动卡顿甚至可能导致浏览器卡死的问题。

为了实现上述目的，本发明采用以下技术方案：

第一方面，提供了一种基于HTML5的流程图绘制方法，包括：

获取流程图显示数据；

解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；

针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中；

针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；

根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；

遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；

遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；

为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；

在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态；

在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置；

在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；

在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。

基于上述发明内容，提供了一种能够避免拖动卡顿的流程图重绘方案，即在将流程图显示数据初始绘制到HTML5画布上后，为所述HTML5画布绑定可基于HTML5的事件传播机制来捕捉到内部元素的鼠标按下事件、鼠标移动事件和鼠标松开事件，并通过这三事件来使得在节点拖动时，会在流程图上绘制一个被拖动节点的轮廓来反映用户的拖动，并确保实际的节点与出口不进行重绘，而当用户拖动完成后，如果位置发生变化，则真实被拖动的节点才移动到被拖动的新位置，并重算出口和重绘部分区域流程图，进而使得一次完整的拖动只进行一次计算和重绘，避免出现拖动卡顿现象，可带来极大的性能提升和极高的用户体验，便于实际应用和推广。

在一个可能的设计中，在得到所述节点列表和所述出口列表之后，所述方法还包括有：

遍历所述节点列表和所述出口列表，找出与所述节点列表中的各个节点对应的至少一个关联出口，并将所述至少一个关联出口设置到对应节点对象的出口列表中，以便后续通过节点直接查找到对应的关联出口，其中，所述关联出口是指以节点为出口线起始点或出口线结束点的出口。

在一个可能的设计中，遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，包括：

针对所述节点列表中的各个节点对象，若判定对应节点为流程未经过节点，则确定对应的颜色为第一颜色，而若判定对应节点为流程停留节点，则确定对应的颜色为第二颜色，而若判定对应节点为流程已经过节点，则确定对应的颜色为第三颜色，其中，所述第一颜色、所述第二颜色和所述第三颜色为不同的三种颜色；

针对所述各个节点对象，若判定对应节点类型为创建节点，则确定对应的图形为带有开始图标的第一图形，而若判定对应节点类型为审批节点，则确定对应的图形为带有审批图标的第二图形，而若判定对应节点类型为只读节点，则确定对应的图形为带有只读图标的第三图形，其中，所述第一图形、所述第二图形和所述第三图形为不同的三种图形。

在一个可能的设计中，在针对某个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上之后，所述方法还包括有：

为所述HTML5画布上的所述某个节点对象绑定鼠标点击事件，以便在触发所述鼠标点击事件时，弹出一个HTML5图层来展示所述某个节点对象的节点信息；

和/或，为所述HTML5画布上的所述某个节点对象增加自定义的且为与所述某个节点对象对应的节点唯一标识的第一属性值，以便在后续拖动时，定位用户拖动的对象。

在一个可能的设计中，遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，包括：

针对所述出口列表中的各个出口对象，若判定对应出口为流程未经过出口，则确定对应的颜色为第四颜色，而若判定对应出口为流程已经过出口，则确定对应的颜色为第五颜色，其中，所述第四颜色和所述第五颜色为不同的两种颜色；

针对所述各个出口对象，分析对应出口折线所经过的一系列坐标点，并根据对应的出口两端所在节点对象的位置和大小，通过智能微调得到对应的需绘制坐标点集合。

在一个可能的设计中，在针对某个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上之后，所述方法还包括有：

为所述HTML5画布上的所述某个出口对象绑定鼠标停留事件，以便在触发所述鼠标停留事件时，浮动显示一个HTML5图层来展示所述某个出口对象的出口信息；

和/或，为所述HTML5画布上的所述某个出口对象增加自定义的且为与所述某个出口对象对应的出口唯一标识的第二属性值，以便在后续拖动时，定位与用户拖动节点对象所连接的出口。

在一个可能的设计中，在将某个节点的图形及颜色重新绘制到某个新位置，并针对以所述某个节点为出口线起始点或出口线结束点的各个出口，将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上之后，所述方法还包括：

若判定在所述某个新位置和所有所述新的需绘制坐标点集合中的第三横坐标最大值大于所述HTML5画布的宽度，则将所述HTML5画布的宽度更新为所述第三横坐标最大值；

若判定在所述某个新位置和所有所述新的需绘制坐标点集合中的第三纵坐标最大值大于所述HTML5画布的高度，则将所述HTML5画布的高度更新为所述第三纵坐标最大值。

第二方面，提供了一种基于HTML5的流程图绘制装置，包括有数据获取模块、数据解析模块、信息封装模块、画布确定模块、节点绘制模块、出口绘制模块、事件绑定模块、事件响应模块和出口重绘模块；

所述数据获取模块，用于获取流程图显示数据；

所述数据解析模块，通信连接所述数据获取模块，用于解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；

所述信息封装模块，通信连接所述数据解析模块，用于针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中，以及针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；

所述画布确定模块，通信连接所述数据解析模块，用于根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；

所述节点绘制模块，分别通信连接所述信息封装模块和所述画布确定模块，用于遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；

所述出口绘制模块，分别通信连接所述信息封装模块和所述画布确定模块，用于遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；

所述事件绑定模块，分别通信连接所述节点绘制模块和所述出口绘制模块，用于为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；

所述事件响应模块，通信连接所述事件绑定模块，用于在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态，以及在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置，以及还在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；

所述出口重绘模块，通信连接所述事件响应模块，用于在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。

第三方面，本发明提供了一种计算机设备，包括有依次通信连接的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法。

第四方面，本发明提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法。

第五方面，本发明提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法。

上述方案的有益效果：

(1)本发明创造性提供了一种能够避免拖动卡顿的流程图重绘方案，即在将流程图显示数据初始绘制到HTML5画布上后，为所述HTML5画布绑定可基于HTML5的事件传播机制来捕捉到内部元素的鼠标按下事件、鼠标移动事件和鼠标松开事件，并通过这三事件来使得在节点拖动时，会在流程图上绘制一个被拖动节点的轮廓来反映用户的拖动，并确保实际的节点与出口不进行重绘，而当用户拖动完成后，如果位置发生变化，则真实被拖动的节点才移动到被拖动的新位置，并重算出口和重绘部分区域流程图，进而使得一次完整的拖动只进行一次计算和重绘，避免出现拖动卡顿现象，可带来极大的性能提升和极高的用户体验；

(2)还可以大大地提升用户对流程图节点的辨识性，通过流程图，可以直观的总览所包含的节点类型，知晓每个流程节点需要做什么操作；

(3)通过对节点和出口增加是否走过(流转过)的颜色标志，让用户可以直观的通过流程图知晓当前流程的流转状态，哪些节点已经走过，哪些未走过，当前停留在谁那里，真正做到心中有数，便于实际应用和推广。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的基于HTML5的流程图绘制方法的流程示意图。

图2为本申请实施例提供的基于HTML5的流程图绘制装置的结构示意图。

图3为本申请实施例提供的计算机设备的结构示意图。

具体实施方式

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将结合附图和实施例或现有技术的描述对本发明作简单地介绍，显而易见地，下面关于附图结构的描述仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在此需要说明的是，对于这些实施例方式的说明用于帮助理解本发明，但并不构成对本发明的限定。

应当理解，尽管本文可能使用术语第一和第二等等来描述各种对象，但是这些对象不应当受到这些术语的限制。这些术语仅用于区分一个对象和另一个对象。例如可以将第一对象称作第二对象,并且类似地可以将第二对象称作第一对象，同时不脱离本发明的示例实施例的范围。

应当理解，对于本文中可能出现的术语“和/或”，其仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A、单独存在B或者同时存在A和B等三种情况；又例如，A、B和/或C，可以表示存在A、B和C中的任意一种或他们的任意组合；对于本文中可能出现的术语“/和”，其是描述另一种关联对象关系，表示可以存在两种关系，例如，A/和B，可以表示：单独存在A或者同时存在A和B等两种情况；另外，对于本文中可能出现的字符“/”，一般表示前后关联对象是一种“或”关系。

实施例：

如图1所示，本实施例第一方面提供的且基于HTML5的流程图绘制方法，可以但不限于由具有一定计算资源的计算机设备执行，例如由平台服务器、个人计算机(PersonalComputer，PC，指一种大小、价格和性能适用于个人使用的多用途计算机；台式机、笔记本电脑到小型笔记本电脑和平板电脑以及超级本等都属于个人计算机)、智能手机、个人数字助理(Personal Digital Assistant，PDA)或可穿戴设备等电子设备执行。如图1所示，所述流程图绘制方法，可以但不限于包括有如下步骤S1～S12。

S1.获取流程图显示数据。

在所述步骤S1中，所述流程图显示数据由服务器所维护，因此可以但不限于具体是通过异步请求方式从所述服务器上获取所述流程图显示数据。

S2.解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含但不限于有节点的节点唯一标识、横坐标值和纵坐标值等，所述出口信息包含但不限于有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含但不限于有出口线起始点、出口线经过点和出口线结束点等。

在所述步骤S2中，具体数据解析方式为现有方式。此外，所述节点信息还包含但不限于有节点的节点显示名称、大小和操作人等内容。

S3.针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中。

S4.针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中。

S5.根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度。

在所述步骤S5中，所述HTML5画布即为流程图画面，其为一个SVG(ScalableVector Graphics，图形文件格式，意思为可缩放的矢量图形)元素，而节点为SVG元素中一个子元素，其中，创建节点和归档节点是ellipse元素，审批节点和只读节点为path元素，出口也是一个path元素。

S6.遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上。

在所述步骤S6中，所述HTML5绘图程序为基于HTML5图形绘制技术的现有程序。为了针对不同类型的节点，通过使用不同的图形展示效果来培养用户的习惯，让用户很直观地可以知道流程图上的节点都是什么类型，优选的，遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，包括但不限于有：针对所述节点列表中的各个节点对象，若判定对应节点为流程未经过节点，则确定对应的颜色为第一颜色，而若判定对应节点为流程停留节点，则确定对应的颜色为第二颜色，而若判定对应节点为流程已经过节点，则确定对应的颜色为第三颜色，其中，所述第一颜色、所述第二颜色和所述第三颜色为不同的三种颜色；针对所述各个节点对象，若判定对应节点类型为创建节点，则确定对应的图形为带有开始图标的第一图形，而若判定对应节点类型为审批节点，则确定对应的图形为带有审批图标的第二图形，而若判定对应节点类型为只读节点，则确定对应的图形为带有只读图标的第三图形，其中，所述第一图形、所述第二图形和所述第三图形为不同的三种图形。前述判定节点类型的具体方式可以基于节点信息的具体内容来常规分析确定。此外，所述第一颜色、所述第二颜色和所述第三颜色可以举例分别为绿色、橙色和蓝色，所述第一图形、所述第二图形和所述第三图形可以举例分别为圆形、菱形和矩形。

S7.遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上。

在所述步骤S7中，同样为了针对不同状态的出口，通过使用不同的图形展示效果来培养用户的习惯，让用户很直观地可以知道流程图上的出口线都是什么类型，优选的，遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，包括但不限于有：针对所述出口列表中的各个出口对象，若判定对应出口为流程未经过出口，则确定对应的颜色为第四颜色，而若判定对应出口为流程已经过出口，则确定对应的颜色为第五颜色，其中，所述第四颜色和所述第五颜色为不同的两种颜色；针对所述各个出口对象，分析对应出口折线所经过的一系列坐标点，并根据对应的出口两端所在节点对象的位置和大小，通过智能微调得到对应的需绘制坐标点集合。前述判定出口类型的具体方式可以基于出口信息的具体内容来常规分析确定，以及前述坐标点分析和智能微调方式也为现有常规方式。此外，所述第四颜色和所述第五颜色可以举例分别为浅灰色和红色。

S8.为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件。

在所述步骤S8中，由于所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件，可使得只需要绑定一次事件，从而减少性能损耗。

S9.在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态。

在所述步骤S9中，所述鼠标按下事件的触发方式可以但不限于为：当用户鼠标在节点元素上按下时，触发对应SVG元素的鼠标按下事件。

S10.在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置。

在所述步骤S10中，所述鼠标移动事件的触发方式可以但不限于为：当用户在节点元素上按下鼠标后，又移动了鼠标，则触发对应SVG元素的鼠标移动事件。此外，若鼠标一直拖动，则重复触发所述鼠标移动事件，并不断重绘所述虚线矩形或所述拷贝图形。

S11.在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上。

在所述步骤S11中，所述鼠标松开事件的触发方式可以但不限于为：当用户鼠标松开时，触发所述鼠标松开事件。在将节点的图形及颜色重新绘制到新位置上后，还可以更新所述节点列表中对应节点对象的位置信息。此外，在再次判定该新位置与该节点的当前位置相同时，则不做任何处理。

S12.在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。

在所述步骤S12中，所述新的需绘制坐标点集合的具体确定方式可以但不限于如下：根据所述某个新位置重新确定出口线走向，然后根据该出口线走向确定新的需绘制坐标点集合。在针对以所述某个节点为出口线起始点或出口线结束点的各个出口重新绘制对应折线后，同样可以更新所述出口列表中对应出口对象的位置信息，以便暂存用户操作结果。

由此基于前述步骤S1～S12所描述的且基于HTML5的流程图绘制方法，提供了一种能够避免拖动卡顿的流程图重绘方案，即在将流程图显示数据初始绘制到HTML5画布上后，为所述HTML5画布绑定可基于HTML5的事件传播机制来捕捉到内部元素的鼠标按下事件、鼠标移动事件和鼠标松开事件，并通过这三事件来使得在节点拖动时，会在流程图上绘制一个被拖动节点的轮廓来反映用户的拖动，并确保实际的节点与出口不进行重绘，而当用户拖动完成后，如果位置发生变化，则真实被拖动的节点才移动到被拖动的新位置，并重算出口和重绘部分区域流程图，进而使得一次完整的拖动只进行一次计算和重绘，避免出现拖动卡顿现象，可带来极大的性能提升和极高的用户体验，便于实际应用和推广。此外，还可以大大地提升用户对流程图节点的辨识性，通过流程图，可以直观的总览所包含的节点类型，知晓每个流程节点需要做什么操作；以及通过对节点和出口增加是否走过(流转过)的颜色标志，让用户可以直观的通过流程图知晓当前流程的流转状态，哪些节点已经走过，哪些未走过，当前停留在谁那里，真正做到心中有数。

在一个可能的设计中，在得到所述节点列表和所述出口列表之后，所述方法还包括但不限于有：遍历所述节点列表和所述出口列表，找出与所述节点列表中的各个节点对应的至少一个关联出口，并将所述至少一个关联出口设置到对应节点对象的出口列表中，以便后续通过节点直接查找到对应的关联出口，其中，所述关联出口是指以节点为出口线起始点或出口线结束点的出口。如此在每次拖动到新位置后重新绘制出口时，不再需要重新遍历，可进一步大大提升性能。

在一个可能的设计中，在针对某个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上之后，所述方法还包括但不限于有：为所述HTML5画布上的所述某个节点对象绑定鼠标点击事件，以便在触发所述鼠标点击事件时，弹出一个HTML5图层来展示所述某个节点对象的节点信息；和/或，为所述HTML5画布上的所述某个节点对象增加自定义的且为与所述某个节点对象对应的节点唯一标识的第一属性值，以便在后续拖动时，定位用户拖动的对象。

在一个可能的设计中，在针对某个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上之后，所述方法还包括但不限于有：为所述HTML5画布上的所述某个出口对象绑定鼠标停留事件，以便在触发所述鼠标停留事件时，浮动显示一个HTML5图层来展示所述某个出口对象的出口信息；和/或，为所述HTML5画布上的所述某个出口对象增加自定义的且为与所述某个出口对象对应的出口唯一标识的第二属性值，以便在后续拖动时，定位与用户拖动节点对象所连接的出口。

在一个可能的设计中，在将某个节点的图形及颜色重新绘制到某个新位置，并针对以所述某个节点为出口线起始点或出口线结束点的各个出口，将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上之后，所述方法还包括：若判定在所述某个新位置和所有所述新的需绘制坐标点集合中的第三横坐标最大值大于所述HTML5画布的宽度，则将所述HTML5画布的宽度更新为所述第三横坐标最大值；若判定在所述某个新位置和所有所述新的需绘制坐标点集合中的第三纵坐标最大值大于所述HTML5画布的高度，则将所述HTML5画布的高度更新为所述第三纵坐标最大值。如此可使画布大小自适应拖动结果。

如图2所示，本实施例第二方面提供了一种实现第一方面或第一方面中任意可能设计所述的且基于HTML5的流程图绘制方法的虚拟装置，包括有数据获取模块、数据解析模块、信息封装模块、画布确定模块、节点绘制模块、出口绘制模块、事件绑定模块、事件响应模块和出口重绘模块；

所述数据获取模块，用于获取流程图显示数据；

所述数据解析模块，通信连接所述数据获取模块，用于解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；

所述信息封装模块，通信连接所述数据解析模块，用于针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中，以及针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；

所述画布确定模块，通信连接所述数据解析模块，用于根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；

所述节点绘制模块，分别通信连接所述信息封装模块和所述画布确定模块，用于遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；

所述出口绘制模块，分别通信连接所述信息封装模块和所述画布确定模块，用于遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；

所述事件绑定模块，分别通信连接所述节点绘制模块和所述出口绘制模块，用于为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；

所述事件响应模块，通信连接所述事件绑定模块，用于在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态，以及在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置，以及还在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；

所述出口重绘模块，通信连接所述事件响应模块，用于在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。

本实施例第二方面提供的前述装置的工作过程、工作细节和技术效果，可以参见第一方面或第一方面中任意可能设计所述的流程图绘制方法，于此不再赘述。

如图3所示，本实施例第三方面提供了一种执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法的计算机设备，包括有依次通信连接的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法。具体举例的，所述存储器可以但不限于包括随机存取存储器(Random-Access Memory，RAM)、只读存储器(Read-Only Memory，ROM)、闪存(Flash Memory)、先进先出存储器(FirstInput First Output，FIFO)和/或先进后出存储器(First Input Last Output，FILO)等等；所述处理器可以但不限于采用型号为STM32F105系列的微处理器。此外，所述计算机设备还可以但不限于包括有电源模块、显示屏和其它必要的部件。

本实施例第三方面提供的前述计算机设备的工作过程、工作细节和技术效果，可以参见第一方面或第一方面中任意可能设计所述的流程图绘制方法，于此不再赘述。

本实施例第四方面提供了一种存储包含如第一方面或第一方面中任意可能设计所述的流程图绘制方法的指令的计算机可读存储介质，即所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法。其中，所述计算机可读存储介质是指存储数据的载体，可以但不限于包括软盘、光盘、硬盘、闪存、优盘和/或记忆棒(Memory Stick)等计算机可读存储介质，所述计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。

本实施例第四方面提供的前述计算机可读存储介质的工作过程、工作细节和技术效果，可以参见如第一方面或第一方面中任意可能设计所述的流程图绘制方法，于此不再赘述。

本实施例第五方面提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如第一方面或第一方面中任意可能设计所述的流程图绘制方法。其中，所述计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程装置。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种基于HTML5的流程图绘制方法，其特征在于，包括：

获取流程图显示数据；

解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；

针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中；

针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；

根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；

遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；

遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；

为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；

在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态；

在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置；

在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；

在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。

2.根据权利要求1所述的流程图绘制方法，其特征在于，在得到所述节点列表和所述出口列表之后，所述方法还包括有：

遍历所述节点列表和所述出口列表，找出与所述节点列表中的各个节点对应的至少一个关联出口，并将所述至少一个关联出口设置到对应节点对象的出口列表中，以便后续通过节点直接查找到对应的关联出口，其中，所述关联出口是指以节点为出口线起始点或出口线结束点的出口。

3.根据权利要求1所述的流程图绘制方法，其特征在于，遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，包括：

针对所述节点列表中的各个节点对象，若判定对应节点为流程未经过节点，则确定对应的颜色为第一颜色，而若判定对应节点为流程停留节点，则确定对应的颜色为第二颜色，而若判定对应节点为流程已经过节点，则确定对应的颜色为第三颜色，其中，所述第一颜色、所述第二颜色和所述第三颜色为不同的三种颜色；

针对所述各个节点对象，若判定对应节点类型为创建节点，则确定对应的图形为带有开始图标的第一图形，而若判定对应节点类型为审批节点，则确定对应的图形为带有审批图标的第二图形，而若判定对应节点类型为只读节点，则确定对应的图形为带有只读图标的第三图形，其中，所述第一图形、所述第二图形和所述第三图形为不同的三种图形。

4.根据权利要求1所述的流程图绘制方法，其特征在于，在针对某个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上之后，所述方法还包括有：

为所述HTML5画布上的所述某个节点对象绑定鼠标点击事件，以便在触发所述鼠标点击事件时，弹出一个HTML5图层来展示所述某个节点对象的节点信息；

和/或，为所述HTML5画布上的所述某个节点对象增加自定义的且为与所述某个节点对象对应的节点唯一标识的第一属性值，以便在后续拖动时，定位用户拖动的对象。

5.根据权利要求1所述的流程图绘制方法，其特征在于，遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，包括：

针对所述出口列表中的各个出口对象，若判定对应出口为流程未经过出口，则确定对应的颜色为第四颜色，而若判定对应出口为流程已经过出口，则确定对应的颜色为第五颜色，其中，所述第四颜色和所述第五颜色为不同的两种颜色；

针对所述各个出口对象，分析对应出口折线所经过的一系列坐标点，并根据对应的出口两端所在节点对象的位置和大小，通过智能微调得到对应的需绘制坐标点集合。

6.根据权利要求1所述的流程图绘制方法，其特征在于，在针对某个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上之后，所述方法还包括有：

为所述HTML5画布上的所述某个出口对象绑定鼠标停留事件，以便在触发所述鼠标停留事件时，浮动显示一个HTML5图层来展示所述某个出口对象的出口信息；

和/或，为所述HTML5画布上的所述某个出口对象增加自定义的且为与所述某个出口对象对应的出口唯一标识的第二属性值，以便在后续拖动时，定位与用户拖动节点对象所连接的出口。

7.根据权利要求1所述的流程图绘制方法，其特征在于，在将某个节点的图形及颜色重新绘制到某个新位置，并针对以所述某个节点为出口线起始点或出口线结束点的各个出口，将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上之后，所述方法还包括：

若判定在所述某个新位置和所有所述新的需绘制坐标点集合中的第三横坐标最大值大于所述HTML5画布的宽度，则将所述HTML5画布的宽度更新为所述第三横坐标最大值；

若判定在所述某个新位置和所有所述新的需绘制坐标点集合中的第三纵坐标最大值大于所述HTML5画布的高度，则将所述HTML5画布的高度更新为所述第三纵坐标最大值。

8.一种基于HTML5的流程图绘制装置，其特征在于，包括有数据获取模块、数据解析模块、信息封装模块、画布确定模块、节点绘制模块、出口绘制模块、事件绑定模块、事件响应模块和出口重绘模块；

所述数据获取模块，用于获取流程图显示数据；

所述数据解析模块，通信连接所述数据获取模块，用于解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；

所述信息封装模块，通信连接所述数据解析模块，用于针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中，以及针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；

所述画布确定模块，通信连接所述数据解析模块，用于根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；

所述节点绘制模块，分别通信连接所述信息封装模块和所述画布确定模块，用于遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；

所述出口绘制模块，分别通信连接所述信息封装模块和所述画布确定模块，用于遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；

所述事件绑定模块，分别通信连接所述节点绘制模块和所述出口绘制模块，用于为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；

所述事件响应模块，通信连接所述事件绑定模块，用于在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态，以及在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置，以及还在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；

所述出口重绘模块，通信连接所述事件响应模块，用于在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。

9.一种计算机设备，其特征在于，包括有依次通信连接的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如权利要求1～7中任意一项所述的流程图绘制方法。

10.一种计算机可读存储介质，其特征在于,所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如权利要求1～7中任意一项所述的流程图绘制方法。

Images