劉賢梅, 孫永穎, 趙婭

(東北石油大學(xué) 計算機與信息技術(shù)學(xué)院，大慶 163318)

基于HTML5的電力線路圖動態(tài)繪制研究

劉賢梅, 孫永穎, 趙婭

(東北石油大學(xué) 計算機與信息技術(shù)學(xué)院，大慶 163318)

對HTML5關(guān)鍵技術(shù)進行研究，提出了一種B/S架構(gòu)下的基于HTML5的電力線路圖動態(tài)繪制方法。通過Canvas結(jié)合JavaScript腳本語言并利用Canvas分層繪制技術(shù)實現(xiàn)了電力線路圖的動態(tài)繪制，具有跨平臺、免插件、易維護等特點。同時實現(xiàn)了基于關(guān)鍵字的圖形與數(shù)據(jù)庫的聯(lián)動查詢，顯示線路圖中圖元的詳細信息?；趀xcel超鏈接技術(shù)實現(xiàn)了移動端的線路圖查看。

HTML5； Canvas； 線路圖繪制； 聯(lián)動查詢； excel超鏈接

0 引言

隨著科學(xué)技術(shù)和工程技術(shù)的發(fā)展，電力生產(chǎn)中的設(shè)備數(shù)量日漸增多，安全管理日趨嚴格。這就要求員工隨時查看線路信息，以便檢查線路故障。隨著移動端的迅速發(fā)展，用戶的需求不再滿足于PC端，而是轉(zhuǎn)向使用移動設(shè)備隨時隨地進行查詢管理與PC端進行管理維護相結(jié)合。電力系統(tǒng)中對于線路圖的繪制管理主要是基于B/S模式實現(xiàn)的。傳統(tǒng)的基于HTML的B/S模式開發(fā)客戶端表現(xiàn)能力較差，服務(wù)器端數(shù)據(jù)處理壓力大?；赗IA技術(shù)的B/S模式，主要包括Flash和Silverlight等，能提升客戶端的表現(xiàn)能力，但過于依賴瀏覽器插件，這些插件在使用之前都必須下載和安裝，有些還存在瀏覽器兼容性的問題，降低了用戶的體驗性和安全性[1,2]。目前大多數(shù)的移動端設(shè)備不支持插件，因此也不利于移動端設(shè)備的移植。

近年來出現(xiàn)的HTML5技術(shù)對實現(xiàn)數(shù)據(jù)處理量大、實時性要求高的Web應(yīng)用具有較大優(yōu)勢[3]。HTML5提供了Canvas和SVG接口對數(shù)據(jù)進行可視化繪制，使Web開發(fā)人員在瀏覽器端使用標準的Web技術(shù)實現(xiàn)免插件、跨平臺的Web數(shù)據(jù)可視化成為可能[4]。目前，幾乎所有的主流瀏覽器都支持HTML5標準，如IE9以上版本(含IE9)、Firefox(火狐瀏覽器)、Chrome(谷歌瀏覽器)和Safari(狩獵)等。而且現(xiàn)在移動終端的百度瀏覽器、UC瀏覽器和Opera等瀏覽器也都實現(xiàn)了對HTML5主要標準的支持，使在移動端實現(xiàn)數(shù)據(jù)的可視化成為可能。

本文提出了一種B/S架構(gòu)下的基于HTML5的電力線路圖動態(tài)繪制方法?；贏SP.NET平臺設(shè)計了線路圖管理系統(tǒng)，實現(xiàn)了電力線路圖的動態(tài)繪制、基于關(guān)鍵字的圖形與數(shù)據(jù)庫的聯(lián)動查詢、移動端線路圖的查看，并結(jié)合實例對系統(tǒng)進行了測試與分析。

1 繪制方法流程

本文采用B/S結(jié)構(gòu)，服務(wù)器端利用ASP.NET技術(shù)為基礎(chǔ)進行設(shè)計構(gòu)建，客戶端以W3C 最近發(fā)布的HTML5參考標準為依據(jù)進行設(shè)計，基于HTML5Canvas、JavaScript等技術(shù)對線路圖的動態(tài)繪制進行研究，開發(fā)了電力生產(chǎn)的線路圖管理系統(tǒng)。按照系統(tǒng)的層次結(jié)構(gòu)分析，將該系統(tǒng)分為表現(xiàn)層、業(yè)務(wù)邏輯層、數(shù)據(jù)層三個層次進行構(gòu)建。利用MVC模式進行開發(fā)，做到了視圖、控制器和模型的分離，有利于標準化，降低層與層之間的依賴，實現(xiàn)了各層間連接的“高內(nèi)聚，低耦合”。數(shù)據(jù)層采用數(shù)據(jù)庫Oracle10g結(jié)合AutoCAD數(shù)據(jù)解析進行設(shè)計，其主要負責存儲和管理線路圖繪制所需數(shù)據(jù)。業(yè)務(wù)邏輯層采用Web應(yīng)用服務(wù)器—IIS，同時Web應(yīng)用服務(wù)器端程序使用ASP.NET編寫，其主要設(shè)計完成存在于服務(wù)器文件系統(tǒng)中符合客戶瀏覽器端請求的線路圖繪制功能與關(guān)鍵字匹配信息聯(lián)動查詢，同時完成excel超鏈接文件及插入PNG圖片的excel文件的下載功能。根據(jù)客戶瀏覽器端的請求對線路圖數(shù)據(jù)進行預(yù)處理，包括數(shù)據(jù)關(guān)系來源、坐標變換等，然后將預(yù)處理后的數(shù)據(jù)傳輸?shù)娇蛻魹g覽器端。表現(xiàn)層即為顯示層，分為PC端的顯示和移動端的查看。PC端不同平臺設(shè)備根據(jù)自身瀏覽器對預(yù)處理后的數(shù)據(jù)進行數(shù)據(jù)解析，通過HTML5 Canvas和Javascript腳本技術(shù)實現(xiàn)動態(tài)交互繪制渲染并顯示。移動端通過打開拷貝到自身的excel文件進行線路圖的查看。

2 繪制關(guān)鍵技術(shù)研究與實現(xiàn)

2.1 線路圖數(shù)據(jù)處理

2.1.1 數(shù)據(jù)關(guān)系來源

線路圖的數(shù)據(jù)大多來源于實際的線路布置，根據(jù)現(xiàn)場實際的情況，由圓、圓弧、三角、直線等基本符號中的一種或幾種組合代表線路圖中的電路元器件，如開關(guān)變臺、熔斷器、桿型、中轉(zhuǎn)站、變電所等。部分電路元器件示意圖如圖1所示。

(a) 開關(guān)變臺

(b) 真空熔斷器

(c) 直線桿

(d) 中轉(zhuǎn)站

(e) 變電所

圖1 電路元器件示意圖

首先根據(jù)實際情況，采用AutoCAD繪圖工具繪制.dwg格式的線路圖，解析圖元的類型及存儲端點的位置、顏色等信息。對解析后的數(shù)據(jù)進行清洗，剔除畫圖過程中產(chǎn)生的奇異點，保證繪圖的準確性。

2.1.2 坐標變換

線路圖數(shù)據(jù)由繪制的CAD信息提供，由于繪制時的比例及大小存在人為等不可控因素，為了保證線路圖的顯示保持原圖比例，需要規(guī)定畫布的比例，從而使繪制的線路圖不會變形。設(shè)數(shù)據(jù)集中最大的寬度為Wmax，最小的寬度為Wmin，數(shù)據(jù)集中最大的高度為Hmax，最小的高度為Hmin，畫布寬度為W，畫布高度為H，其畫布比例的變換公式如式(1)。

(1)

為了讓繪制的線路圖顯示在可視化的Canvas畫布上，需要對坐標進行等比例變換，確定畫布大小，找出原始數(shù)據(jù)的極值，轉(zhuǎn)化成相對坐標，設(shè)原始數(shù)據(jù)的坐標為(X,Y)，數(shù)據(jù)集中的最小值坐標為(Xmin,Ymin)，最大值坐標為(Xmax,Ymax)，畫布高為H，寬為W，其相對坐標變換公式如式(2)、式(3)。

(2)

(3)

2.2 基于HTML5 Canvas的線路圖繪制

2.2.1 線路圖的分類繪制

線路圖管理中的線路圖繪制采用HTML5標準下的Canvas接口與JavaScript腳本相結(jié)合的方法實現(xiàn)線路圖的可視化顯示。具體步驟如下：首先定義Canvas標簽，其目的是充當2D渲染上下文的封裝。每個Canvas元素都有一個對應(yīng)的context對象(上下文對象)，CanvasAPI定義在這個context對象上面，所以需要獲取這個對象，方法是使用getContext方法。getContext方法指定參數(shù)2d，表示該Canvas對象用于生成2D圖案。

var canvas= document.getElementById("mycanvas")

if (canvas.getContext){

var context= canvas.getContext('2d');

}

然后從后臺數(shù)據(jù)庫中查詢出線路圖中代表元器件的組合形狀即圖元的端點、顏色等信息。利用ajax的方法，通過定義同名的Array()數(shù)據(jù)組進行前后臺的參數(shù)傳遞，將后臺信息傳到HTML頁，由瀏覽器進行解析繪制。對需要繪制的圖元進行分類，如圓、直線、三角等。分別編寫JavaScript腳本對一類圖元進行繪制，繪制時只需區(qū)分類型，重復(fù)調(diào)用腳本即可。以圓為例，部分繪制腳本如下：

var node = new JTopo.Node("");//定義節(jié)點

node.beginDegree = 0;//定義起點角度

node.width = node.height = d[i];//定義節(jié)點直徑

node.setLocation(x[i], y[i]);//定義節(jié)點坐標

node.paint = function(g){

//繪制半徑為width/2的黑色實心圓

g.beginPath();//開始路徑

g.moveTo(0,0);//定義繪制原點

g.fillStyle = 'rgba(0,0,0,' + this.alpha + ')';//節(jié)點顏色填充

g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree+2*Math.PI);//節(jié)點實例化

g.closePath();//結(jié)束路徑

g.save();//保存元素

//繪制半徑為width/2-1的白色實心圓

g.beginPath();

g.moveTo(0,0);

g.fillStyle ='rgba(255,255,255,' + this.alpha + ')';

g.arc(0, 0, this.width/2-1, this.beginDegree, this.beginDegree + 2*Math.PI);

g.closePath();

g.save();

this.paintText(g);}//進行繪制

scene1.add(node);//繪制結(jié)果可視化

2.2.2 圖形與數(shù)據(jù)庫信息的聯(lián)動查詢

在實際的線路圖中，所有的元器件都包含許多自身的屬性，為了讓用戶直觀的查詢各元器件的信息，本系統(tǒng)采用鏈接查詢的方式實現(xiàn)了線路圖圖元與數(shù)據(jù)庫信息聯(lián)動查詢。根據(jù)識別圖中的關(guān)鍵字信息，與數(shù)據(jù)庫中的關(guān)鍵字進行匹配，從而查詢出相關(guān)信息。用戶通過點擊具體塊名稱的文字，發(fā)出查詢請求，查詢oracle數(shù)據(jù)庫，數(shù)據(jù)庫根據(jù)關(guān)鍵字進行數(shù)據(jù)匹配，將匹配后的數(shù)據(jù)通過頁面的形式顯示給用戶，完成圖形與數(shù)據(jù)庫的鏈接。

2.2.3 線路圖的分層繪制

為了解決繪制時部分圖形的遮擋問題，使用HTML5Canvas的分層繪制技術(shù)進行繪制。首先對圖形進行分類。可能被遮擋的圖形位于畫布的上層，其它圖形位于畫布的下層。在本文中，圓位于下層，其它圖形位于上層。使用Canvas分層繪制時，在DOM中創(chuàng)建不同Canvas畫布使各畫布共存于視區(qū)的同一位置，按照畫布應(yīng)該顯示的順序來樣式化z-index樣式，從而管理圖層順序。

2.3 基于excel超鏈接的移動端線路圖查看

為了滿足用戶使用移動端設(shè)備隨時隨地查詢線路圖信息的需要，采用excel超鏈接技術(shù)實現(xiàn)通過線路名稱查看線路圖信息的功能。由于部分移動端不支持excel鏈接到圖片，而幾乎所有的移動端都支持excel鏈接到excel，因此采用將線路圖以圖片的形式插入到excel中的方式，以便用戶查看。首先用戶根據(jù)電力部門所在的樹狀結(jié)構(gòu)鏈接在PC端對該部門線路圖進行批量繪制，并導(dǎo)出PNG格式的圖片，將圖片插入excel中，并同時生成帶有超鏈接的excel文件。對全部的excel文件進行壓縮并打包下載到本地，解壓后拷貝到用戶的移動設(shè)備中。用戶通過點擊超鏈接進行查看線路圖信息。

3 應(yīng)用與分析

本文所采用的實驗室平臺為操作系統(tǒng)Windows7，內(nèi)存為2.00G，CPU為2.00GHz，服務(wù)器為IIS7.0，瀏覽器為360安全瀏覽器8.1的極速模式。在實驗平臺上使用VS2010開發(fā)平臺，結(jié)合C#、JavaScript腳本語言，基于HTML5標準開發(fā)了線路圖管理子系統(tǒng)。本文對其中線路圖的繪制模塊進行研究，實現(xiàn)了線路圖的繪制以及放大、縮小等功能，如圖2所示。

同時實現(xiàn)了圖形與數(shù)據(jù)庫的聯(lián)動查詢，如圖3所示。

移動端實現(xiàn)了基于excel超鏈接技術(shù)的線路圖如圖4所示，圖4-a中Excel超鏈接文件顯示了所有的線路名稱。選取了某個線路圖名稱鏈接，顯示的線路圖信息如圖4-b所示。測試結(jié)果表明，系統(tǒng)中繪圖模塊運行穩(wěn)定，頁面響應(yīng)迅速，可視化效果良好，移動端可隨時查看。

圖2 線路圖

圖3 圖形與數(shù)據(jù)庫的聯(lián)動查詢圖

(a) Excel鏈接文件圖

(b) 鏈接線路圖信息顯示圖4 Excel超連接技術(shù)線路圖

4 總結(jié)

本文提出了一種B/S架構(gòu)下的基于HTML5的電力線路圖動態(tài)繪制方法，相比傳統(tǒng)的基于HTML和基于RIA的B/S模式下的圖形繪制，該方法具有跨平臺、免插件、后期易維護更新等方面的明顯優(yōu)勢。用戶客戶端不安裝任何第三方插件就可以在瀏覽器端實現(xiàn)線路圖的繪制。同時實現(xiàn)了基于關(guān)鍵字的圖形與數(shù)據(jù)庫信息的聯(lián)動查詢。最后實現(xiàn)了采用excel超鏈接技術(shù)實現(xiàn)通過線路名稱查看線路圖信息的功能，滿足用戶隨時隨地使用移動設(shè)備檢查線路故障的要求。

[1] 張慶，王浩. 基于RIA架構(gòu)的網(wǎng)絡(luò)監(jiān)控系統(tǒng)的研究和實現(xiàn)[J].計算機應(yīng)用與軟件，2012, 29(4): 163-166.

[2] Alexey Demin，代浣興，李新,等. 基于HTML5和WebGL的機器人3D環(huán)境下的運動學(xué)仿真[J].東北大學(xué)學(xué)報(自然科學(xué)版)，2014, 35(4): 664-668.

[3] 劉維峰，左澤軍，趙利強,等. 基于HTML5的生產(chǎn)裝置實時監(jiān)測可視化[J].計算機工程與設(shè)計，2015，36(3): 810-813.

[4] 王淑慶，韓勇，張小壘,等. 基于HTML5的時空軌跡動態(tài)可視化方法[J].計算機工程與設(shè)計，2015，36(12): 3318-3323.

Research on Electricity Circuit Diagram Dynamic Map Based on HTML5

Liu Xianmei, Sun Yongying, Zhao Ya

(School of Computer & Information Technology, Northeast Petroleum University, Daqing 163318, China)

Through the research on key technologies of HTML5, a dynamic drawing method of electricity circuit diagram was propsed based on HTML5 under B/S architecture. We realized the dynamic drawing of electricity circuit diagram by combining Canvas with JavaScript script language and the Canvas hierarchical rendering technology. HTML5 has the characteristics of cross platform, free plug-in, easy maintenance, etc. At the same time, it achieves displaying detailed information about the elements in the circuit diagram with the linked query of graphics and database based on keywords. Hyperlink technology which is based on excel realizes checking the mobile terminal circuit diagram.

HTML5; Canvas; circuit diagram draw; linkage query; excel hyperlink

黑龍江省教育科學(xué)規(guī)劃重點課題(GJB1215019)的階段研究成果。

劉賢梅(1968-)，女，山東省日照市，教授，碩士生導(dǎo)師，研究方向:虛擬現(xiàn)實方向。 孫永穎(1993-)，女，黑龍江省綏化市，碩士研究生，研究方向:多媒體方向。 趙婭(1980-)，女，河南省臨水市，副教授，碩士研究生，研究方向:虛擬現(xiàn)實方向。

1007-757X(2017)08-0020-04

TP393

A

2017.05.11)