CN104461577A - 一种基于html5图形绘制程序的流程图显示方法 - Google Patents

Abstract

本发明提供了一种基于HTML5图形绘制程序的流程图显示方法，包括以下步骤：A、重新划分流程图内的节点，具体如下：将流程图内以发散节点为起点、以汇聚节点为终点且起点与终点之间不存在任何发散节点或汇聚节点的区域划分为最小区域，并将所述最小区域用作该流程图内的节点；B、确定所述流程图内经过重新划分的各节点的x、y轴坐标；C、根据预设的节点间距，将重新划分的各节点的x、y轴坐标转换成实际坐标；D、根据重新划分的各节点的实际坐标，使用HTML5图形绘制程序绘制出由重新划分的各节点所组成的流程图。该方法解决了在处理大流程图时需重复遍历某一节点的问题。

Description

一种基于HTML5图形绘制程序的流程图显示方法

技术领域

本发明涉及一种流程图的显示方法，特别是指一种基于HTML5图形绘制程序的流程图显示方法。

背景技术

基于HTML5图形绘制程序的流程图由如下几类节点组成：开始节点、结束节点、普通节点、发散节点(简称split节点)和汇聚节点(简称join节点)。现有的基于HTML5图形绘制程序的流程图显示方法采用图的广度优先遍历算法来计算图中每个节点的位置信息。由于图中的节点交叉连接，因此存在节点被重复遍历的情况。如图1所示，发散节点(s1和s2)越多，重复遍历计算的次数就越多，特别是嵌套层次较多时(发散节点的子节点还属于发散节点的情况)。这样，会消耗不必要的计算机运算处理能力，影响计算机的处理性能。特别是在处理大流程图时，这种重复遍历某一节点的现象更为突出，极大地影响了计算机的运算处理，需要耗费较长时间才能展现流程图，甚至无法正常显示流程图，由此给用户带来极差的使用体验。

发明内容

有鉴于此，本发明的主要目的在于提供一种基于HTML5图形绘制程序的流程图显示方法，以解决上述现有技术所存在的问题。

本发明提供的一种基于HTML5图形绘制程序的流程图显示方法包括以下步骤：

A、重新划分流程图内的节点，具体如下：将流程图内以发散节点为起点、以汇聚节点为终点且起点与终点之间不存在任何发散节点或汇聚节点的区域划分为最小区域，并将所述最小区域用作该流程图内的节点；

B、确定所述流程图内经过重新划分的各节点的x、y轴坐标；

C、根据预设的节点间距，将重新划分的各节点的x、y轴坐标转换成实际坐标；

D、根据重新划分的各节点的实际坐标，使用HTML5图形绘制程序绘制出由重新划分的各节点所组成的流程图。

在上述的方法中，所述步骤A还包括：

记录作为所述最小区域起点的发散节点的子节点个数，并将所述最小区域标识为普通节点。

在上述的方法中，步骤B中重新划分的各节点的x、y轴坐标的确定包括：

以开始节点作为水平位置为0的起点，遍历开始节点下的所有子节点，使子节点的水平位置依次递增1，在遇到汇聚节点时，汇聚节点的水平位置为其父节点中最大水平位置加1，由此确定重新划分的各节点的x轴坐标；

以开始节点作为垂直位置为0的起点，遍历开始节点下的所有子节点，使子节点的垂直位置依次递增1，其中，在遇到所述最小区域表示的子节点时，子节点的垂直位置的增量为该最小区域内子节点的数量。

在上述的方法中，步骤C中所述实际坐标的转换包括：

将重新划分的各节点的x、y轴坐标与所述节点间距相乘，获得重新划分的各节点x、y轴坐标的所述实际坐标。

在上述的方法中，所述节点间距为所述流程图内字符的预设尺寸。

由上可以看出，本发明方法通过将流程图中以发散节点为起点、以汇聚节点为终点的区域划分为作为单个节点使用的最小区域，将存在节点交叉连接流程图简化为由直线连接的节点，进而在展现嵌套层次较多的流程图时避免重复遍历计算。由此，不会占用不必要的计算机运算处理能力，并可大大缩短流程图展现所需要的时间，为用户带来良好的使用体验。

附图说明

图1为现有的基于HTML5图形绘制程序的流程图显示方法的原理示意图；

图2为本发明提供的基于HTML5图形绘制程序的流程图显示方法的流程图；

图3本发明方法与现有方法的原理对比示意图；

图4为本发明提供的基于HTML5图形绘制程序的流程图显示方法的原理示意图。

具体实施方式

为了实现上述发明目的，本发明的主要原理在于：将复杂的流程图由内向外逐步拆解(层层分隔)，以将流程图划分成多个最小区域(相当于重新划分流程图的节点)，直到将流程图简化为最简形式(一条直线连接两个节点的模型)，即：流程图最终被简化为：开始节点→普通节点或最小区域→结束节点。

下面结合附图，基于上述本发明方法的原理详细介绍本发明提供的一种基于HTML5图形绘制程序的流程图显示方法。

如图2所示，上述基于HTML5图形绘制程序的流程图显示方法包括以下步骤：

步骤100：利用流程图中的发散节点和汇聚节点将流程图划分成多个最小区域，并将最小区域用作该流程图中的节点，以重新划分流程图中的节点。

本步骤的具体实施如下：

首先，确定流程图中各节点的水平位置(x轴坐标)，其中，以开始节点作为水平位置为“0”的起点，遍历开始节点下的所有子节点。子节点的水平位置依次递增“1”。遇到汇聚节点时，汇聚节点的水平位置为其父节点中最大水平位置加“1”，例如，如图3所示，汇聚节点j1的父节点中最大水平位置为“4”，因此汇聚节点j1的水平位置为“4+1”(“5”)。在此之后继续查找后续节点，一直查到结束节点为止。

接着，找出流程图中成对出现的发散节点和汇聚节点，形成两个包含发散节点标识和汇聚节点标识的节点对集合对象，例如第一节点对集合对象Map<split_ID,join_ID>和第二节点对集合对象Map<join_ID,split_ID>。

遍历第一节点对集合对象，将其中以发散节点为起点、以汇聚节点为终点且起点与终点其间不存在任何发散节点或汇聚节点的区域划分为最小区域(miniZone)。如果遍历到该集合中某一对象的发散节点与汇聚节点之间存在其它发散节点或汇聚节点，则跳过这一条记录继续遍历下条记录。

在划分了一个最小区域后，记录作为该最小区域起点的发散节点的子节点个数(cNum)。标识被划分出的最小区域，例如标识该最小区域的发散节点和汇聚节点，以在后续处理过程中，将被划分出的最小区域作为普通节点处理。最小区域可被存储为两个集合对象Map<split_ID,cNum>和Map<join_ID,cNum>。

随着上述遍历过程的持续，如图4所示，某一最小区域的父节点还可以作为另一最小区域的发散节点(起点)，此时该最小区域已被当作普通节点使用。直至完成针对第一节点对集合对象的遍历。

步骤200：确定流程图中经过重新划分的各节点(包括最小区域)的y坐标。

以开始节点作为垂直位置为“0”的起点，遍历开始节点下的所有子节点。子节点的垂直位置依次递增“1”。其中，在遇到最小区域表示的子节点时，子节点的垂直位置的增量为“该最小区域内子节点的数量”。

之后，根据预设的(依据流程图中字符的尺寸而设定)节点间距(单位为像素)，转换各节点x、y轴坐标为各节点实际坐标，即：x*节点间水平间距(例如105像素)，y*节点间垂直间距(例如80像素)。

步骤300：根据经过重新划分的各节点的实际坐标，使用HTML5图形绘制程序绘制出经过最小区域划分的各节点定义的流程图。

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

Claims (5)

1.一种基于HTML5图形绘制程序的流程图显示方法，其特征在于，包括以下步骤：

A、重新划分流程图内的节点，具体如下：将流程图内以发散节点为起点、以汇聚节点为终点且起点与终点之间不存在任何发散节点或汇聚节点的区域划分为最小区域，并将所述最小区域用作该流程图内的节点；

B、确定所述流程图内经过重新划分的各节点的x、y轴坐标；

C、根据预设的节点间距，将重新划分的各节点的x、y轴坐标转换成实际坐标；

D、根据重新划分的各节点的实际坐标，使用HTML5图形绘制程序绘制出由重新划分的各节点所组成的流程图。

2.根据权利要求1所述的方法，其特征在于，所述步骤A还包括：

记录作为所述最小区域起点的发散节点的子节点个数，并将所述最小区域标识为普通节点。

3.根据权利要求1所述的方法，其特征在于，步骤B中重新划分的各节点的x、y轴坐标的确定包括：

以开始节点作为水平位置为0的起点，遍历开始节点下的所有子节点，使子节点的水平位置依次递增1，在遇到汇聚节点时，汇聚节点的水平位置为其父节点中最大水平位置加1，由此确定重新划分的各节点的x轴坐标；

以开始节点作为垂直位置为0的起点，遍历开始节点下的所有子节点，使子节点的垂直位置依次递增1，其中，在遇到所述最小区域表示的子节点时，子节点的垂直位置的增量为该最小区域内子节点的数量。

4.根据权利要求3所述的方法，其特征在于，步骤C中所述实际坐标的转换包括：

将重新划分的各节点的x、y轴坐标与所述节点间距相乘，获得重新划分的各节点x、y轴坐标的所述实际坐标。

5.根据权利要求4所述的方法，其特征在于，所述节点间距为所述流程图内字符的预设尺寸。