劉賢梅, 張錫強(qiáng), 趙婭(東北石油大學(xué),計算機(jī)與信息技術(shù)學(xué)院，大慶 163318)

基于HTML5的油田混輸管道拓?fù)鋱D動態(tài)繪制的研究

劉賢梅, 張錫強(qiáng), 趙婭
(東北石油大學(xué),計算機(jī)與信息技術(shù)學(xué)院，大慶 163318)

隨著油田生產(chǎn)的需要與互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，油田管道的拓?fù)鋱D應(yīng)運(yùn)而生。用戶對油田管道拓?fù)鋱D的使用和交互體驗的要求也越來越高，傳統(tǒng)的拓?fù)鋱D繪制技術(shù)已難以滿足用戶的需求。HTML5能夠解決基于插件的Web矢量拓?fù)鋱D顯示技術(shù)存在著需要下載安裝、難以使用跨平臺跨瀏覽器、存在不安全隱患以及在信息分析和交互能力上存在明顯的缺陷等問題。采用HTML5的Canvas特性，利用HTML5的圖形圖像處理功能完成了對油田管道拓?fù)鋱D的動態(tài)繪制。

HTML5； Canvas； 油田管道； 拓?fù)鋱D繪制

0 引言

隨著經(jīng)濟(jì)和社會的發(fā)展，石油的需求量越來越大，油田的智能化已經(jīng)成為解決油田生產(chǎn)問題的根本關(guān)鍵，混輸管道是油田生產(chǎn)當(dāng)中最重要的基礎(chǔ)設(shè)施之一，隨著油田生產(chǎn)力的增長，管道的布設(shè)也越來越多，如何直觀的反應(yīng)管道的布局、隨時隨地利用管道拓?fù)鋱D及其相關(guān)數(shù)據(jù)也變的越來越重要。然而用戶己不滿足于傳統(tǒng)的基于C/S模式獲取管道信息的方式，并且傳統(tǒng)的基于HTML的超級文本標(biāo)記語言的技術(shù)，不能夠直接操作數(shù)據(jù)進(jìn)行位圖繪制，這種方法需要在客戶端的瀏覽器安裝插件以讀取矢量的油田拓?fù)鋱D數(shù)據(jù)并進(jìn)行繪制和實現(xiàn)各種查詢和分析功能。但是這些插件在使用之前都必須得下載和安裝，有些還存在著瀏覽器兼容性的問題，給用戶帶來了諸多的不便，而且由于插件大多需要獲取本地資源操作權(quán)限，也給用戶帶來不安全的隱患。HTML5的強(qiáng)大功能可在油田數(shù)據(jù)化時代給用戶帶來一種全新的應(yīng)用方式及一種新穎的用戶體驗。在HTML5平臺上，圖像、音頻、視頻、動畫與客戶端的各種交互過程都被標(biāo)準(zhǔn)化。HTML5在頁面上直接支持矢量數(shù)據(jù)的處理能力,并且有增加和本地數(shù)據(jù)存儲等各種新的特性。其中全新的Canvas繪圖元素就是專門為了客戶端繪制矢量圖形而設(shè)計的，它可以實現(xiàn)無插件的矢量數(shù)據(jù)繪制與渲染，無需客戶端安裝專有的插件，為擺脫第三方插件實現(xiàn)矢量數(shù)據(jù)的可視化提供了技術(shù)基礎(chǔ)。為構(gòu)建矢量化、跨平臺跨瀏覽器的油田管道拓?fù)鋱D繪制服務(wù)提供了一種方便快捷的解決思路。本文針對結(jié)合HTML5的Canvas的多種繪制路徑，矩形，圓形，字符以及圖像處理的特性，采用了Canvas依托動態(tài)數(shù)據(jù)繪制油田管道拓?fù)鋱D的開發(fā)流程，對基于的矢量油田管道拓?fù)鋱D服務(wù)及相關(guān)應(yīng)用進(jìn)行了深入的研究，并通過原型的實現(xiàn)證明了該方法的實用性和可行性。

1 HTML5相關(guān)技術(shù)

1.1 HTML5

HTML5這個版本的超文本標(biāo)識語言是最新的主要修訂版本，目前正處于發(fā)展尖端，他的目標(biāo)是取代之前所制定的標(biāo)準(zhǔn)，并且包含了許多新的特征，并對之前的一些舊的特征尤其是基于腳本的API做了大量的更新[1]，其目的是為了減少瀏覽器對于需要插件才能運(yùn)行富網(wǎng)絡(luò)應(yīng)用(RIA)的依賴性，并提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

HTML5增加了許多新的元素，如〈video〉,〈audio〉,〈canvas〉等[2]，同時整合了SVG內(nèi)容。這些元素的添加是為了更容易和方便地在網(wǎng)頁中添加和處理多媒體和圖片內(nèi)容，而〈canvas〉標(biāo)簽的使用將可以為管道拓?fù)鋱D繪制提供更快和更新的實現(xiàn)方法。

1.2 Canvas

Canvas 是HTML5引入的一個新元素，該元素表示一個在頁面上即時渲染的位圖區(qū)域，其可以通過Javascript對其內(nèi)容進(jìn)行操控[3]。所謂即時渲染，意思是Canvas標(biāo)簽是通過操控像素來對屏幕上內(nèi)容進(jìn)行顯示的。通過其提供的API，HTML5 Canvas會在每一幀完全重繪畫布區(qū)域的內(nèi)容。對于開發(fā)者來說，所要做的工作就是在每一幀繪制之前，準(zhǔn)備好顯示的內(nèi)容，從而讓頁面元素達(dá)到開發(fā)者預(yù)想的效果。

這點讓HTML5 Canvas與Flash技術(shù)，Sliverlight技術(shù)或SVG技術(shù)區(qū)別開來，后者采用的是保留模式[3]。在這種模式中，圖像的顯示效果是由圖像渲染器決定的，開發(fā)者只能通過修改元素的屬性來調(diào)整相關(guān)的顯示(例如，橫坐標(biāo)，豎坐標(biāo)，背景透明度等等)雖然這樣可以讓開發(fā)者遠(yuǎn)離底層操作，專注于上層邏輯，但是另一方面，弱化了對畫布的可操作性，并不一定能得到預(yù)期的效果。

基本的HTML5Canvas API包含了對2D模型的各種操作，開發(fā)者可以通過該API在畫布上顯示各種形狀，渲染文字，又或者直接將一幅圖片顯示在頁面的畫布上[4]。開發(fā)者可以自行操作其顏色，對其進(jìn)行旋轉(zhuǎn)，調(diào)整色彩透明度，也可以繪制各種直線，曲線，盒子模型，填充色等等。

就起自身而言，HTML5 Canvas 2D對象提供了一些2D元素操控API，讓開發(fā)者能夠在像素級別進(jìn)行操控圖形[5]，并且輸入想要的結(jié)果。單獨使用Canvas 技術(shù)并不能創(chuàng)建復(fù)雜的應(yīng)用程序，但是配合跨瀏覽器技術(shù)，鍵盤和鼠標(biāo)事件響應(yīng)，定時器，對象，聲音，數(shù)學(xué)函數(shù)等，那么開發(fā)者就能夠充分利HTML提供的新技術(shù)創(chuàng)建出令人驚嘆的應(yīng)用程序。

2 管道拓?fù)鋱D繪制過程

2.1 畫布設(shè)置

Canvas繪圖元素以〈canvas〉標(biāo)簽的形式出現(xiàn)，對應(yīng)著一個矩形區(qū)域畫布。畫布的大小可以通過width和height屬性來調(diào)整。例如油田管道拓?fù)鋱D繪制系統(tǒng)中，定義一個1366*768的畫布，只需在HTML文檔中加入如下代碼即可。

〈canvas width="1366" height="768" id="canvas"〉

除了用于展示的畫布以外，為了實現(xiàn)對繪制好的圖像進(jìn)行拖拽、放大、縮小等功能，需要定義一個scene(場景)用于承載畫布，然后通過完成對scene的拖拽和縮放來實現(xiàn)上述功能[6]，實例化scene代碼如下：

var scene = new JTopo.Scene();

stage.add(scene);

值得一提的是，為了保證繪制圖形的比例與實際場景的比例大致相同，也就是對原場景或樣圖的比例及相對位置保證一個高的還原度，我們需要人為的規(guī)定畫布的大小，來保證畫布的橫縱比，從而使繪制出的圖像不會出現(xiàn)變形等情況，橫縱比公式如下[7]：

畫布寬度W=

2.2 動態(tài)數(shù)據(jù)矢量化

油田管道坐標(biāo)數(shù)據(jù)存放在后臺的數(shù)據(jù)庫中，由于各大油田都有自己的一套數(shù)據(jù)采集、管理系統(tǒng)，所以油田管道的原始坐標(biāo)數(shù)據(jù)的來源各不相同，可能是衛(wèi)星獲取的相對于地球的坐標(biāo)信息，也可能是以某管道起點為原點相對坐標(biāo)信息，如何對坐標(biāo)數(shù)據(jù)進(jìn)行處理以適應(yīng)于畫布的大小，最終給用戶一個直觀全面的展示是本系統(tǒng)中的一個難點。

首先，我們需要確定整個畫布的最大長度和寬度；然后尋找原始數(shù)據(jù)中的最大值與最小值，最后通過以下公式將原始數(shù)據(jù)轉(zhuǎn)化成相對坐標(biāo)[8]：

2.3 前后臺數(shù)據(jù)傳送

整個動態(tài)數(shù)據(jù)的矢量過程都是在程序的后臺完成，而HTML5則完全應(yīng)用于前臺。主流的傳參主要用一下幾種方法[9]：

(1) 在前臺讀寫數(shù)據(jù)庫；

(2) session/cookie；

(3) 寫在ajax里面作為URL param或者POST body傳參；

HTML5完善的前臺數(shù)據(jù)處理機(jī)制，使我們可以在前臺連接數(shù)據(jù)庫，盡管可以有效的減輕后臺服務(wù)器的壓力的同時，卻造成了暴露數(shù)據(jù)庫連接代碼的危險，所以并不能作為商業(yè)開發(fā)的最佳選擇，而常用的session也會因為對于進(jìn)程的依賴性以及瀏覽器端對cookie的限制而不能達(dá)到理想的傳參效果。

最終本系統(tǒng)采用了ajax的方法，通過作為URL param或者POSTbody的方法進(jìn)行傳參。首先，在程序的后臺通過Array()數(shù)據(jù)的形式存儲矢量化的數(shù)據(jù)[10]，而后在前臺通過javascript腳本語言定義同名的數(shù)據(jù)，最終使用Respone.Write()函數(shù)將矢量化后的動態(tài)數(shù)據(jù)以URL 的形式傳遞到前臺[11]。最終實現(xiàn)了拓?fù)鋱D的精確繪制。

2.4 圖像繪制

完成了圖像繪制所需要的坐標(biāo)參數(shù)的計算、傳輸后，可以進(jìn)行基本圖元的繪制，最終通過循環(huán)語句完成拓?fù)鋱D的繪制。

油田管道拓?fù)鋱D主要由管道節(jié)點及管道組成，在拓?fù)鋱D中，管道節(jié)點以點的形式存在，具體代碼如下：

var node_name1 =jdmc[i];

var node = newJTopo.CircleNode(node_name1);//定義節(jié)點名稱

node.fillStyle = '200,255,0'/節(jié)點顏色填充

node.radius = 3;//定義節(jié)點半徑node.setLocation(x[i], y[i]);//定義節(jié)點坐標(biāo)

node.layout = { type: 'circle', radius: 3 };//節(jié)點實例化

scene.add(node);//添加到場景中

代碼分對節(jié)點的字體信息、形狀、半徑、顏色等進(jìn)行描述。在完成了基本圖形的繪制后，通過scene.add()函數(shù)完成在場景中的繪制[12]，最終通過畫布展示給用戶。

節(jié)點繪制結(jié)束后，通過Line()函數(shù)完成節(jié)點之間的連線，最終通過循環(huán)函數(shù)，完成全部節(jié)點的繪制及連線。

var link = new JTopo.Link(node, zdnode); // 連線

link.strokeColor = '0,0,0';//定義線條顏色

link.lineWidth = 0.5;//定義線條寬度

scene.add(link);//在scene中繪制線條

2.5 程序效果展示

通過綜上所述技術(shù)點，靈活運(yùn)用HTML5的Canvas畫布功能，結(jié)合油田管道數(shù)據(jù)的分析，實現(xiàn)了油田管道拓?fù)鋱D像的繪制,如圖1所示。

圖1 油田管道拓?fù)鋱D

除了正常的拓?fù)鋱D繪制外，還增加了工具欄菜單，主要功能是可針對已繪制的拓?fù)鋱D進(jìn)行放大縮小等輔助功能，縮小功能代碼如下：

$('#zoomCheckbox').click(function(){

if($'#zoomCheckbox').attr('checked')){

stage.wheelZoom = 0.85; // 設(shè)置鼠標(biāo)縮放比例

}else{

stage.wheelZoom = null; // 取消鼠標(biāo)縮放比例

}

});

主要是通過javascript代碼來獲取鼠標(biāo)對工具欄按鈕的操作來調(diào)整整個包含已繪制圖像的容器的大小，最終完成對拓?fù)鋱D的放大或縮小功能。

3 總結(jié)

隨著對Web應(yīng)用的需求越來越高，傳統(tǒng)的B/S應(yīng)用程序和基于第三方插件的Web應(yīng)用開發(fā)，越來越不能應(yīng)付復(fù)雜的Web圖形和用戶界面的需求。新生的HTML5技術(shù)，提供了豐富的多媒體應(yīng)用功能，極大的減少了傳統(tǒng)Web應(yīng)用對插件的依賴。HTML5的Canvas技術(shù)，徹底改變了傳統(tǒng)的Web圖形圖像處理技術(shù)，它只需要一個簡單的頁面元素，通過調(diào)用其內(nèi)置的圖形繪制函數(shù)和像素級的處理功能，就能完成以前復(fù)雜的圖形圖像處理功能。

本文通過使用HTML5中的Canvas標(biāo)簽，介紹如何利用Canvas和JavaScript腳本在Web頁面上獲取后臺傳輸?shù)牟东@的油田管道相對地球坐標(biāo)的動態(tài)數(shù)據(jù)進(jìn)行繪圖。通過Canvas標(biāo)簽繪制的圖像，不僅無需第三方插件，同時還可以保存成圖片，此外可以節(jié)約帶寬，減少服務(wù)器繪制圖像的負(fù)擔(dān)，依靠客戶端機(jī)器本身的性能進(jìn)行繪圖，同時解決了如Flash等第三方插件不能在服務(wù)器端認(rèn)證和不能共享瀏覽器的會話狀態(tài)等問題，因此其強(qiáng)大的生命力，將勢必引起新一輪Web應(yīng)用開發(fā)技術(shù)的革新。

[1] 余飛.基于HTML5的圖形圖像協(xié)同處理技術(shù)研究與實現(xiàn)[D].長江大學(xué), 2015,(6).

[2] 劉華星，楊庚,等.HTML5——下一代Web開發(fā)標(biāo)準(zhǔn)研究[J].計算機(jī)技術(shù)與發(fā)展，2011,(8):54.

[3] 楊帆.基于HTML5的圖形化網(wǎng)頁數(shù)據(jù)展示[J].無線互聯(lián)科技，2013,(7):42-43.

[4] 徐卓揆.基于HTML5、Ajax和WebService的WebGIS研究[J].測繪科學(xué)，2012,(1):145-147.

[5] 李燁民.基于HTML5的前端本地化存儲技術(shù)[J].成都大學(xué)學(xué)報，2012,(1):67-69.

[6] 胡晶.HTML5中Canvas與Flash的應(yīng)用研究[J].辦公自動化，2014,(5):195.

[7] 徐莎，楊帆，徐昌慶.基于HTML5的WebGIS的研究與應(yīng)用[J].信息技術(shù)，2015,(13):149-151.

[8] 戴松，許冉，周忠.基于HTML5的算法動畫可視化平臺[J].系統(tǒng)仿真學(xué)報，2013,(10):2436-2448.

[9] 周輝，程陳，任海軍,等.基于HTML5的全景圖展示[J].微型機(jī)與應(yīng)用，2012,(20):73-79,86.

[10] 王淑慶，韓勇，張小壘,等.基于HTML5的時空軌跡動態(tài)可視化方法[J].北京交通大學(xué)學(xué)報，2015,(12):3318-3323.

[11] Tu Min, Zhu Yi-bing. Application and Research of HTML5 Representing future WEB Developed Standard. Proceedings of 2011 3rd IEEE International Conference on Information Management and Engineering(ICIME 2011)，2011.

[12] Jingming XIE.HTML5 Visual Composition of REST-like Web Services[C]. 2013 IEEE 4th International Conference on Software Engineering and Service Science，2013.

ResearchonOilfieldMixedPipelineTopologyDynamicMapBasedonHTML5

Liu Xianmei， Zhang Xiqiang, Zhao Ya
(Northeast Petroleum University, Daqing 163318)

With the need of oil field production and the rapid development of the Internet technology, oilfield pipeline topology graph appears at the moment.The requeirments of users on the use of the oil field pipeline topologygraph and interaction experience become increasingly higher, the traditional topology graphdrawingingtechnology connot meet the needs of users.HTML5 can solve the problems about Web vector network topology graph based on plug-in technology which needs to download and install, but it is hard to cross-platform, cross-browser， unsafe. Its information analysis and interaction ability exit obvious shortcomings and other issues. This paper achieves drawing oilfield pipeline topology graph dynamically by using the new attributes Canvasand the graphic image processing function of HTML5.

HTML5; Canvas; OilfiedpiPeline; Drawing topology graph

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

劉賢梅(1968-)，女，教授，碩士生導(dǎo)師，中國計算機(jī)學(xué)會高級會員(E200007945S)，研究領(lǐng)域：虛擬現(xiàn)實、三維可視化等.

張錫強(qiáng)(1992-)，男，遼寧省，碩士研究生，研究方向：虛擬現(xiàn)實方向.

1007-757X(2017)11-0027-03

2016.12.10)