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

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

【技术实现步骤摘要】
一种基于HTML5的流程图绘制方法、装置、设备及存储介质


[0001]本专利技术属于图形绘制
，具体涉及一种基于HTML5的流程图绘制方法、装置、设备及存储介质。

技术介绍

[0002]HTML5(即HyperText Markup Language 5的缩写)是构建Web内容的一种语言描述方式，其作为互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。基于HTML5图形绘制技术的流程图主要包含有节点(即步骤)和出口(即节点与节点之间的连线)两大元素，其中，节点又分为创建节点、审批节点和只读节点，不同类型节点在图形和大小上有一定的差异，节点与节点之间通过出口连接。
[0003]现有基于HTML5图形绘制程序的流程图，在用户拖动节点时，会通过监听节点移动事件的方法，捕捉节点移动轨迹，重算该节点所连接的出口的位置，然后重新绘制流程图，该节点移动事件在拖动过程中会一直按照某种固定的频率触发，导致浪费大量的客户端计算能力，从而导致拖动卡顿，更甚者导致浏览器卡死。另外，现有基于HTML5图形绘制程序的流程图，不区分节点类型，节点图形都以空心菱形为主，是否走过节点和出口也未有明显的标志，由此导致用户无法直观的从流程图上查看各个节点类型和已走过、未走过和当前停留的节点，从而导致用户体验大打折扣。

技术实现思路

[0004]本专利技术的目的是提供一种基于HTML5的流程图绘制方法、装置、计算机设备及计算机可读存储介质，用以解决现有流程图绘制方案所存在拖动卡顿甚至可能导致浏览器卡死的问题。
[0005]为了实现上述目的，本专利技术采用以下技术方案：
[0006]第一方面，提供了一种基于HTML5的流程图绘制方法，包括：
[0007]获取流程图显示数据；
[0008]解析所述流程图显示数据，得到所有节点的节点信息和所有出口的出口信息，其中，所述节点信息包含有节点的节点唯一标识、横坐标值和纵坐标值，所述出口信息包含有出口的两端节点唯一标识和坐标点集合，所述出口是指两节点之间的连线，所述坐标点集合包含有出口线起始点、出口线经过点和出口线结束点；
[0009]针对所述所有节点中的各个节点，将对应的节点信息封装为一个节点对象，并放入节点列表中；
[0010]针对所述所有出口中的各个出口，将对应的出口信息封装为一个出口对象，并放入出口列表中；
[0011]根据所述所有节点的节点信息，确定在所述所有节点的所在位置中的第一横坐标最大值和第一纵坐标最大值，以及根据所述所有出口的出口信息，确定在所有出口线经过点中的第二横坐标最大值和第二纵坐标最大值，然后将在所述第一横坐标最大值和所述第
二横坐标最大值中的最大值作为HTML5画布的宽度，以及将在所述第一纵坐标最大值和所述第二纵坐标最大值的最大值作为所述HTML5画布的高度；
[0012]遍历分析所述节点列表中的各个节点对象，确定得到所述各个节点对象的图形及颜色，并针对所述各个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上；
[0013]遍历分析所述出口列表中的各个出口对象，确定得到所述各个出口对象的需绘制坐标点集合及颜色，并针对所述各个出口对象，通过所述HTML5绘图程序将由对应的需绘制坐标点集合及颜色确定的折线绘制到所述HTML5画布上；
[0014]为所述HTML5画布绑定鼠标按下事件、鼠标移动事件和鼠标松开事件，其中，所述鼠标按下事件、所述鼠标移动事件和所述鼠标松开事件分别为基于HTML5的事件传播机制来捕捉到内部元素的事件；
[0015]在触发所述鼠标按下事件时，若判定本次的按下事件源对象为一个节点，则通过所述HTML5绘图程序，在该节点的图层上方生成一个正好完全覆盖该节点的虚线矩形或拷贝图形，并记录该节点已经被选中且处于可拖动状态；
[0016]在触发所述鼠标移动事件时，若判定有节点被按下选中且本次的移动事件源对象为该节点，则通过所述HTML5绘图程序，将原本覆盖该节点的虚线矩形或拷贝图形重新绘制到鼠标移动新位置；
[0017]在触发所述鼠标松开事件时，若判定有节点处于拖动状态，则获取原本覆盖该节点的虚线矩形或拷贝图形的新位置，并在再次判定该新位置与该节点的当前位置不同时，通过所述HTML5绘图程序，将该节点的图形及颜色重新绘制到该新位置上；
[0018]在将某个节点的图形及颜色重新绘制到某个新位置后，针对以所述某个节点为出口线起始点或出口线结束点的各个出口，根据所述某个新位置重新确定对应的且新的需绘制坐标点集合，并通过所述HTML5绘图程序将由对应的且新的需绘制坐标点集合及颜色确定的折线重新绘制到所述HTML5画布上。
[0019]基于上述
技术实现思路
，提供了一种能够避免拖动卡顿的流程图重绘方案，即在将流程图显示数据初始绘制到HTML5画布上后，为所述HTML5画布绑定可基于HTML5的事件传播机制来捕捉到内部元素的鼠标按下事件、鼠标移动事件和鼠标松开事件，并通过这三事件来使得在节点拖动时，会在流程图上绘制一个被拖动节点的轮廓来反映用户的拖动，并确保实际的节点与出口不进行重绘，而当用户拖动完成后，如果位置发生变化，则真实被拖动的节点才移动到被拖动的新位置，并重算出口和重绘部分区域流程图，进而使得一次完整的拖动只进行一次计算和重绘，避免出现拖动卡顿现象，可带来极大的性能提升和极高的用户体验，便于实际应用和推广。
[0020]在一个可能的设计中，在得到所述节点列表和所述出口列表之后，所述方法还包括有：
[0021]遍历所述节点列表和所述出口列表，找出与所述节点列表中的各个节点对应的至少一个关联出口，并将所述至少一个关联出口设置到对应节点对象的出口列表中，以便后续通过节点直接查找到对应的关联出口，其中，所述关联出口是指以节点为出口线起始点或出口线结束点的出口。
[0022]在一个可能的设计中，遍历分析所述节点列表中的各个节点对象，确定得到所述
各个节点对象的图形及颜色，包括：
[0023]针对所述节点列表中的各个节点对象，若判定对应节点为流程未经过节点，则确定对应的颜色为第一颜色，而若判定对应节点为流程停留节点，则确定对应的颜色为第二颜色，而若判定对应节点为流程已经过节点，则确定对应的颜色为第三颜色，其中，所述第一颜色、所述第二颜色和所述第三颜色为不同的三种颜色；
[0024]针对所述各个节点对象，若判定对应节点类型为创建节点，则确定对应的图形为带有开始图标的第一图形，而若判定对应节点类型为审批节点，则确定对应的图形为带有审批图标的第二图形，而若判定对应节点类型为只读节点，则确定对应的图形为带有只读图标的第三图形，其中，所述第一图形、所述第二图形和所述第三图形为不同的三种图形。
[0025]在一个可能的设计中，在针对某个节点对象，通过HTML5绘图程序且按照对应的横坐标值和纵坐标值，将对应的图形及颜色绘制到所述HTML5画布上之后，所述方本文档来自技高网...

【技术保护点】

【技术特征摘要】
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...

【专利技术属性】
技术研发人员：王成才，熊学武，韦利东，
申请(专利权)人：上海泛微软件有限公司，
类型：发明
国别省市：