趙旭輝

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

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

趙旭輝

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1 建立車次與停靠站對(duì)象

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

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

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

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

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

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

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

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

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

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

在圖2中點(diǎn)擊“校驗(yàn)”按鈕后，會(huì)對(duì)選擇的各個(gè)車次對(duì)象進(jìn)行處理并計(jì)算其坐標(biāo)位置；選擇停靠站的排列順序，這個(gè)順序決定了周轉(zhuǎn)圖的不同繪制效果。其方法如下：

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)束語(yǔ)

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

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

[2]陳廣秀.計(jì)算機(jī)編制機(jī)車周轉(zhuǎn)圖系統(tǒng)優(yōu)化設(shè)計(jì)[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

趙旭輝，副教授。