使用SVG繪制車底周轉(zhuǎn)圖方法研究

趙旭輝

（遼寧鐵道職業(yè)技術(shù)學(xué)院，錦州 121000）

使用SVG繪制車底周轉(zhuǎn)圖方法研究

趙旭輝

（遼寧鐵道職業(yè)技術(shù)學(xué)院，錦州 121000）

在B/S運算模式下，應(yīng)用SVG繪制車底周轉(zhuǎn)圖，能充分發(fā)揮瀏覽器的計算能力，減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，提高圖片顯示速度，并可進行動態(tài)圖片的顯示，是解決動態(tài)繪圖的有效方法。

SVG ； 車底周轉(zhuǎn)圖 ；動態(tài)繪圖

車底周轉(zhuǎn)圖是鐵路車體運用的重要文件，涉及到車體運用效率等諸多問題。在很多列車管理系統(tǒng)中均有此類圖形直觀地顯示車底周轉(zhuǎn)情況。B/S運算模式下，通過瀏覽器使用SVG繪制車底周轉(zhuǎn)圖可以充分地發(fā)揮瀏覽器的計算能力，減少網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，提高圖片顯示速度，有助于進行動態(tài)圖片的顯示，是一種比較實用的方式。

1 SVG及其應(yīng)用方法

縮放矢量圖形（SVG ，Scalable Vector Graphics），是使用 XML 格式定義的圖像，SVG的繪圖代碼可以直接嵌入在HTML代碼中，當(dāng)前主流瀏覽器都能較好地支持SVG圖像的顯示。與普通的圖像相比，SVG是純矢量繪圖，圖形大小可以不失真地?zé)o級縮放，給用戶帶來格外清晰的體驗；與網(wǎng)絡(luò)傳輸?shù)钠胀▓D像相比，SVG能充分發(fā)揮瀏覽器的計算能力，在客戶端應(yīng)用JavaScript代碼進行動態(tài)繪圖，代碼傳輸速度快、傳輸量小、畫面顯示時延?。磺夷軇討B(tài)化繪圖，可依據(jù)設(shè)定的條件動態(tài)顯示圖像內(nèi)容；此外用戶還可以和SVG圖像中的元素進行點擊、選擇、移動等交互式操作。這些特點較好地滿足了現(xiàn)代信息管理系統(tǒng)對圖像顯示的需要。

在普通HTML頁面中嵌入SVG圖形，只需在頁面中添加如下代碼即可。

應(yīng)用SVG繪圖時，可以使用JavaScript腳本，書寫SVG繪圖命令，通過瀏覽器即可顯示出圖像。

2 車底周轉(zhuǎn)的數(shù)據(jù)模型及實現(xiàn)方法

手工繪制的車底周轉(zhuǎn)圖如圖1所示。該圖反映出共用車底的車次到發(fā)時刻、?？寇囌?、周轉(zhuǎn)時間、編組數(shù)量等信息。

圖1 車底周轉(zhuǎn)圖

仔細分析圖1可知：車底周轉(zhuǎn)圖主要由車底周轉(zhuǎn)時間、停靠車站、車底周轉(zhuǎn)路徑構(gòu)成。其中，車底周轉(zhuǎn)路徑由車底運行線路、車底停留時間線以及各編組的出發(fā)箭頭3種元素構(gòu)成，繪制的難點在于車底周轉(zhuǎn)路徑的繪制。

考慮到車底周轉(zhuǎn)路徑中各車次的關(guān)聯(lián)特性，可以使用鏈表數(shù)據(jù)結(jié)構(gòu)來描述車底周轉(zhuǎn)過程中的各個車次以及彼此間連接關(guān)系。車底停留時間線作為車次結(jié)點間的連接線，而每個車次車底的運行路線可由該車次結(jié)點到、發(fā)時刻的連線來確定。

2.1 建立車次與?？空緦ο?/p>

在JavaScript中可以通過數(shù)組來實現(xiàn)鏈表結(jié)構(gòu)，數(shù)組中的元素就是周轉(zhuǎn)路徑中出現(xiàn)的各個車次對象。這里采用面向?qū)ο蟮某绦蛟O(shè)計方式，將車次元素定義為對象。車次對象的定義形式如下：

在創(chuàng)建車次對象時，需要使用?？空镜淖鴺?biāo)，這個坐標(biāo)數(shù)據(jù)可以通過車站對象的coordinate屬性獲得。?？寇囌緦ο蟮膭?chuàng)建如下：

車次對象定義中，slope()方法用來計算車次對象自身連線傾斜程度。每一個車次對象均由到、發(fā)時刻以及到、發(fā)站點坐標(biāo)確定的線段來表示，線段的端點分別用P0（x1,y1）和P1(x2，y2)來表示，則其斜率為：

式（1）中，x1—車次的始發(fā)時間換算值，y1—車次的始發(fā)站坐標(biāo)；x2—車次的到達時間換算值， y2—車次的?？空咀鴺?biāo)。

車次對象的斜率直接決定了后續(xù)的停留時間連線的不同形狀。

2.2 停留連接線的繪制規(guī)律

SVG繪圖坐標(biāo)默認以左上點為坐標(biāo)原點，水平向右為遞增方向，垂直向下為遞減方向。由此結(jié)合式（1）可得到：凡是由上向下繪制的車次對象的slope()均大于0，凡由下向上繪制的車次對象的slope()均小于0。再次對照手工繪制的車底周轉(zhuǎn)圖如圖1所示，可以得出停留連接線的繪制規(guī)律：

在管理系統(tǒng)中預(yù)先確定周轉(zhuǎn)圖中各車次的運行情況，周轉(zhuǎn)時間等信息也就隨之確定，如圖2所示。

圖2 確定車底周轉(zhuǎn)圖中的各個車次

圖2中的發(fā)車日、到達日是為了確定該車次的運行時間長度，在checi對象中屬性interval表達的就是車次的運行時長，nextInterval表示與接續(xù)車次的時間間隔，這二者均以日為單位。

在圖2中點擊“校驗”按鈕后，會對選擇的各個車次對象進行處理并計算其坐標(biāo)位置；選擇?？空镜呐帕许樞?，這個順序決定了周轉(zhuǎn)圖的不同繪制效果。其方法如下：

2.3 繪制車底周轉(zhuǎn)圖

生成各車次對象以后，就可以進行周轉(zhuǎn)圖的繪制了。

周轉(zhuǎn)圖繪制過程中，有關(guān)時間、到發(fā)站等信息繪制比較簡單，這里不作過多介紹。主要介紹車底周轉(zhuǎn)路徑圖形的繪制方法：由于各車次是相互銜接的，這里使用數(shù)組來模擬鏈表結(jié)構(gòu)。即將參與車底周轉(zhuǎn)的各車次按先后順序存入數(shù)組，數(shù)組的先后順序即為車次的銜接順序。由圖2的數(shù)據(jù)計算得出該車底的周轉(zhuǎn)時間和停留車站并進行保存。然后調(diào)用drawGraph方法完成繪制。該方法代碼量較大，以流程圖方式給出，如圖3所示。

該方法中繪制周轉(zhuǎn)路徑是通過SVG的polyline命令完成的。繪制代碼如下：

上述代碼中的group為預(yù)先定義好的SVG繪圖空間，將繪圖命令添加至此，即可完成路徑繪圖。

圖3 繪制車次周轉(zhuǎn)路徑流程

3 對繪制圖形的調(diào)整與美化方法

采用上述方法可以快速地繪制出給定車次的周轉(zhuǎn)路徑，但是仔細觀察發(fā)現(xiàn)，由于有些站停留時間過短，導(dǎo)致該停留時段在圖上顯示為一條豎線，極不美觀。需要進行調(diào)整其顯示。

對于各節(jié)點的調(diào)整，主要依據(jù)的是節(jié)點間的距離，調(diào)整思路為事先設(shè)定一個圖中的最小顯示單元，若兩個節(jié)點間的距離小于最小的顯示單元，則進行調(diào)整，遍歷各節(jié)點采用逆推方法，即從最后一個車次節(jié)點向前遞推，判斷其與前一個節(jié)點的距離，并修改前一個節(jié)點的時間坐標(biāo)，使其與后一節(jié)點的距離大于等于最小顯示單元。修改的同時要判斷其終點坐標(biāo)修改后，是否導(dǎo)致了車次對象slope()值的跳變（即由原來的＞0變?yōu)椤?現(xiàn)象），如發(fā)生，則同步改變起點時間坐標(biāo)，以此類推。遍歷整個路徑線，完成調(diào)整。

按此種方法調(diào)整，對于整體圖形外觀并無大的改變。但使得每一個停留線都繪制得更加清晰美觀。調(diào)整后輸出的周轉(zhuǎn)圖如圖4所示。

圖4 SVG繪制的車底周轉(zhuǎn)圖

4 結(jié)束語

使用SVG繪圖可以充分發(fā)揮瀏覽器的計算功能，減少網(wǎng)絡(luò)信息的傳輸量，并能滿足動態(tài)繪制圖像的要求，同時 ，應(yīng)用JavaScript腳本還可以對圖像中的元素進行控制，并能響應(yīng)外部操作，有助于提升用戶的使用體驗。在車底周轉(zhuǎn)圖的繪制中應(yīng)用面向?qū)ο蟮木幊碳夹g(shù)，采用鏈表的數(shù)據(jù)結(jié)構(gòu)，較好地完成了車底周轉(zhuǎn)路徑的繪制工作。

[1]呂苗苗， 倪少權(quán), 陳釘均，等.新舊交替列車運行圖客車車底周轉(zhuǎn)圖智能編制方法研究[J].鐵道學(xué)報，2012（10）.

[2]陳廣秀.計算機編制機車周轉(zhuǎn)圖系統(tǒng)優(yōu)化設(shè)計[D].成都：西南交通大學(xué)，2007.

責(zé)任編輯 徐侃春

Train stock working diagram drawn by using SVG

ZHAO Xuhui
( Liaoning Railway Vocational and Technical College,Jinzhou 121000,China)

In the B/S operation mode,the method of drawing train stock working diagram by using SVG could make full use of computing ability of the browser,reduce the amount of data transmission through network,improve the image display speed,and display pictures dynamically,be the effective method to solve the problem of dynamic drawing.

SVG;train stock working diagram;dynamic drawing

U268+U279∶TP39

A

1005-8451（2016）07-0018-04

2015-12-17

趙旭輝，副教授。