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

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

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


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

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

【專利附圖】

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

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