一種基于html5圖形繪制程序的流程圖顯示方法
【專利摘要】本發(fā)明提供了一種基于HTML5圖形繪制程序的流程圖顯示方法，包括以下步驟：A、重新劃分流程圖內(nèi)的節(jié)點，具體如下：將流程圖內(nèi)以發(fā)散節(jié)點為起點、以匯聚節(jié)點為終點且起點與終點之間不存在任何發(fā)散節(jié)點或匯聚節(jié)點的區(qū)域劃分為最小區(qū)域，并將所述最小區(qū)域用作該流程圖內(nèi)的節(jié)點；B、確定所述流程圖內(nèi)經(jīng)過重新劃分的各節(jié)點的x、y軸坐標；C、根據(jù)預(yù)設(shè)的節(jié)點間距，將重新劃分的各節(jié)點的x、y軸坐標轉(zhuǎn)換成實際坐標；D、根據(jù)重新劃分的各節(jié)點的實際坐標，使用HTML5圖形繪制程序繪制出由重新劃分的各節(jié)點所組成的流程圖。該方法解決了在處理大流程圖時需重復(fù)遍歷某一節(jié)點的問題。
【專利說明】—種基于HTML5圖形繪制程序的流程圖顯示方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種流程圖的顯示方法，特別是指一種基于HTML5圖形繪制程序的流程圖顯示方法。

【背景技術(shù)】
[0002]基于HTML5圖形繪制程序的流程圖由如下幾類節(jié)點組成:開始節(jié)點、結(jié)束節(jié)點、普通節(jié)點、發(fā)散節(jié)點(簡稱split節(jié)點)和匯聚節(jié)點(簡稱join節(jié)點)?，F(xiàn)有的基于HTML5圖形繪制程序的流程圖顯示方法采用圖的廣度優(yōu)先遍歷算法來計算圖中每個節(jié)點的位置信息。由于圖中的節(jié)點交叉連接，因此存在節(jié)點被重復(fù)遍歷的情況。如圖1所示，發(fā)散節(jié)點(Si和s2)越多，重復(fù)遍歷計算的次數(shù)就越多，特別是嵌套層次較多時(發(fā)散節(jié)點的子節(jié)點還屬于發(fā)散節(jié)點的情況)。這樣，會消耗不必要的計算機運算處理能力，影響計算機的處理性能。特別是在處理大流程圖時，這種重復(fù)遍歷某一節(jié)點的現(xiàn)象更為突出，極大地影響了計算機的運算處理，需要耗費較長時間才能展現(xiàn)流程圖，甚至無法正常顯示流程圖，由此給用戶帶來極差的使用體驗。


【發(fā)明內(nèi)容】

[0003]有鑒于此，本發(fā)明的主要目的在于提供一種基于HTML5圖形繪制程序的流程圖顯示方法，以解決上述現(xiàn)有技術(shù)所存在的問題。
[0004]本發(fā)明提供的一種基于HTML5圖形繪制程序的流程圖顯示方法包括以下步驟:
[0005]A、重新劃分流程圖內(nèi)的節(jié)點，具體如下:將流程圖內(nèi)以發(fā)散節(jié)點為起點、以匯聚節(jié)點為終點且起點與終點之間不存在任何發(fā)散節(jié)點或匯聚節(jié)點的區(qū)域劃分為最小區(qū)域，并將所述最小區(qū)域用作該流程圖內(nèi)的節(jié)點；
[0006]B、確定所述流程圖內(nèi)經(jīng)過重新劃分的各節(jié)點的X、y軸坐標；
[0007]C、根據(jù)預(yù)設(shè)的節(jié)點間距，將重新劃分的各節(jié)點的x、y軸坐標轉(zhuǎn)換成實際坐標；
[0008]D、根據(jù)重新劃分的各節(jié)點的實際坐標，使用HTML5圖形繪制程序繪制出由重新劃分的各節(jié)點所組成的流程圖。
[0009]在上述的方法中，所述步驟A還包括:
[0010]記錄作為所述最小區(qū)域起點的發(fā)散節(jié)點的子節(jié)點個數(shù)，并將所述最小區(qū)域標識為普通節(jié)點。
[0011]在上述的方法中，步驟B中重新劃分的各節(jié)點的x、y軸坐標的確定包括:
[0012]以開始節(jié)點作為水平位置為O的起點，遍歷開始節(jié)點下的所有子節(jié)點，使子節(jié)點的水平位置依次遞增1，在遇到匯聚節(jié)點時，匯聚節(jié)點的水平位置為其父節(jié)點中最大水平位置加1，由此確定重新劃分的各節(jié)點的X軸坐標；
[0013]以開始節(jié)點作為垂直位置為O的起點，遍歷開始節(jié)點下的所有子節(jié)點，使子節(jié)點的垂直位置依次遞增1，其中，在遇到所述最小區(qū)域表示的子節(jié)點時，子節(jié)點的垂直位置的增量為該最小區(qū)域內(nèi)子節(jié)點的數(shù)量。
[0014]在上述的方法中，步驟C中所述實際坐標的轉(zhuǎn)換包括:
[0015]將重新劃分的各節(jié)點的X、y軸坐標與所述節(jié)點間距相乘，獲得重新劃分的各節(jié)點X、I軸坐標的所述實際坐標。
[0016]在上述的方法中，所述節(jié)點間距為所述流程圖內(nèi)字符的預(yù)設(shè)尺寸。
[0017]由上可以看出，本發(fā)明方法通過將流程圖中以發(fā)散節(jié)點為起點、以匯聚節(jié)點為終點的區(qū)域劃分為作為單個節(jié)點使用的最小區(qū)域，將存在節(jié)點交叉連接流程圖簡化為由直線連接的節(jié)點，進而在展現(xiàn)嵌套層次較多的流程圖時避免重復(fù)遍歷計算。由此，不會占用不必要的計算機運算處理能力，并可大大縮短流程圖展現(xiàn)所需要的時間，為用戶帶來良好的使用體驗。

【專利附圖】

【附圖說明】
[0018]圖1為現(xiàn)有的基于HTML5圖形繪制程序的流程圖顯示方法的原理示意圖；
[0019]圖2為本發(fā)明提供的基于HTML5圖形繪制程序的流程圖顯示方法的流程圖；
[0020]圖3本發(fā)明方法與現(xiàn)有方法的原理對比示意圖；
[0021]圖4為本發(fā)明提供的基于HTML5圖形繪制程序的流程圖顯示方法的原理示意圖。

【具體實施方式】
[0022]為了實現(xiàn)上述發(fā)明目的，本發(fā)明的主要原理在于:將復(fù)雜的流程圖由內(nèi)向外逐步拆解(層層分隔)，以將流程圖劃分成多個最小區(qū)域(相當于重新劃分流程圖的節(jié)點)，直到將流程圖簡化為最簡形式(一條直線連接兩個節(jié)點的模型)，即:流程圖最終被簡化為:開始節(jié)點一普通節(jié)點或最小區(qū)域一結(jié)束節(jié)點。
[0023]下面結(jié)合附圖，基于上述本發(fā)明方法的原理詳細介紹本發(fā)明提供的一種基于HTML5圖形繪制程序的流程圖顯示方法。
[0024]如圖2所示，上述基于HTML5圖形繪制程序的流程圖顯示方法包括以下步驟:
[0025]步驟100:利用流程圖中的發(fā)散節(jié)點和匯聚節(jié)點將流程圖劃分成多個最小區(qū)域，并將最小區(qū)域用作該流程圖中的節(jié)點，以重新劃分流程圖中的節(jié)點。
[0026]本步驟的具體實施如下:
[0027]首先，確定流程圖中各節(jié)點的水平位置(X軸坐標)，其中，以開始節(jié)點作為水平位置為“O”的起點，遍歷開始節(jié)點下的所有子節(jié)點。子節(jié)點的水平位置依次遞增“I”。遇到匯聚節(jié)點時，匯聚節(jié)點的水平位置為其父節(jié)點中最大水平位置加“1”，例如，如圖3所示，匯聚節(jié)點jl的父節(jié)點中最大水平位置為“4”，因此匯聚節(jié)點jl的水平位置為“4+1” ( “5”)。在此之后繼續(xù)查找后續(xù)節(jié)點，一直查到結(jié)束節(jié)點為止。
[0028]接著，找出流程圖中成對出現(xiàn)的發(fā)散節(jié)點和匯聚節(jié)點，形成兩個包含發(fā)散節(jié)點標識和匯聚節(jié)點標識的節(jié)點對集合對象，例如第一節(jié)點對集合對象Map〈split_ID, join_ID>和第二節(jié)點對集合對象Map〈join_ID, split_ID>。
[0029]遍歷第一節(jié)點對集合對象，將其中以發(fā)散節(jié)點為起點、以匯聚節(jié)點為終點且起點與終點其間不存在任何發(fā)散節(jié)點或匯聚節(jié)點的區(qū)域劃分為最小區(qū)域(miniZone)。如果遍歷到該集合中某一對象的發(fā)散節(jié)點與匯聚節(jié)點之間存在其它發(fā)散節(jié)點或匯聚節(jié)點，則跳過這一條記錄繼續(xù)遍歷下條記錄。
[0030]在劃分了一個最小區(qū)域后，記錄作為該最小區(qū)域起點的發(fā)散節(jié)點的子節(jié)點個數(shù)(cNum)。標識被劃分出的最小區(qū)域，例如標識該最小區(qū)域的發(fā)散節(jié)點和匯聚節(jié)點，以在后續(xù)處理過程中，將被劃分出的最小區(qū)域作為普通節(jié)點處理。最小區(qū)域可被存儲為兩個集合對象 Map〈split_ID, cNum> 和 Map〈join_ID, cNum〉。
[0031]隨著上述遍歷過程的持續(xù)，如圖4所示，某一最小區(qū)域的父節(jié)點還可以作為另一最小區(qū)域的發(fā)散節(jié)點(起點)，此時該最小區(qū)域已被當作普通節(jié)點使用。直至完成針對第一節(jié)點對集合對象的遍歷。
[0032]步驟200:確定流程圖中經(jīng)過重新劃分的各節(jié)點(包括最小區(qū)域)的y坐標。
[0033]以開始節(jié)點作為垂直位置為“O”的起點，遍歷開始節(jié)點下的所有子節(jié)點。子節(jié)點的垂直位置依次遞增“I”。其中，在遇到最小區(qū)域表示的子節(jié)點時，子節(jié)點的垂直位置的增量為“該最小區(qū)域內(nèi)子節(jié)點的數(shù)量”。
[0034]之后，根據(jù)預(yù)設(shè)的(依據(jù)流程圖中字符的尺寸而設(shè)定)節(jié)點間距(單位為像素)，轉(zhuǎn)換各節(jié)點x、y軸坐標為各節(jié)點實際坐標，即:χ*節(jié)點間水平間距(例如105像素)，y*節(jié)點間垂直間距(例如80像素)。
[0035]步驟300:根據(jù)經(jīng)過重新劃分的各節(jié)點的實際坐標，使用HTML5圖形繪制程序繪制出經(jīng)過最小區(qū)域劃分的各節(jié)點定義的流程圖。
[0036]以上所述僅為本發(fā)明的較佳實施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。
【權(quán)利要求】
1.一種基于!11115圖形繪制程序的流程圖顯示方法，其特征在于，包括以下步驟: 八、重新劃分流程圖內(nèi)的節(jié)點，具體如下:將流程圖內(nèi)以發(fā)散節(jié)點為起點、以匯聚節(jié)點為終點且起點與終點之間不存在任何發(fā)散節(jié)點或匯聚節(jié)點的區(qū)域劃分為最小區(qū)域，并將所述最小區(qū)域用作該流程圖內(nèi)的節(jié)點； 8、確定所述流程圖內(nèi)經(jīng)過重新劃分的各節(jié)點的X、1軸坐標； 匕根據(jù)預(yù)設(shè)的節(jié)點間距，將重新劃分的各節(jié)點的X、7軸坐標轉(zhuǎn)換成實際坐標； 0、根據(jù)重新劃分的各節(jié)點的實際坐標，使用肌115圖形繪制程序繪制出由重新劃分的各節(jié)點所組成的流程圖。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述步驟八還包括: 記錄作為所述最小區(qū)域起點的發(fā)散節(jié)點的子節(jié)點個數(shù)，并將所述最小區(qū)域標識為普通節(jié)點。
3.根據(jù)權(quán)利要求1所述的方法，其特征在于，步驟8中重新劃分的各節(jié)點的X、7軸坐標的確定包括: 以開始節(jié)點作為水平位置為0的起點，遍歷開始節(jié)點下的所有子節(jié)點，使子節(jié)點的水平位置依次遞增1，在遇到匯聚節(jié)點時，匯聚節(jié)點的水平位置為其父節(jié)點中最大水平位置加1，由此確定重新劃分的各節(jié)點的X軸坐標； 以開始節(jié)點作為垂直位置為0的起點，遍歷開始節(jié)點下的所有子節(jié)點，使子節(jié)點的垂直位置依次遞增1，其中，在遇到所述最小區(qū)域表示的子節(jié)點時，子節(jié)點的垂直位置的增量為該最小區(qū)域內(nèi)子節(jié)點的數(shù)量。
4.根據(jù)權(quán)利要求3所述的方法，其特征在于，步驟中所述實際坐標的轉(zhuǎn)換包括: 將重新劃分的各節(jié)點的X、7軸坐標與所述節(jié)點間距相乘，獲得重新劃分的各節(jié)點X、7軸坐標的所述實際坐標。
5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述節(jié)點間距為所述流程圖內(nèi)字符的預(yù)設(shè)尺寸。
【文檔編號】G06F9/44GK104461577SQ201410837444
【公開日】2015年3月25日 申請日期:2014年12月29日 優(yōu)先權(quán)日:2014年12月29日
【發(fā)明者】譚敏鋒, 王朝文 申請人:北京致遠協(xié)創(chuàng)軟件有限公司