基于HTML5技術(shù)的大壩安全監(jiān)測圖像繪制技術(shù)

柳翔

摘要：本文介紹了在大壩安全監(jiān)測的圖形化展示領(lǐng)域中，HTML5技術(shù)對比其他技術(shù)所具有的優(yōu)點，并以水情態(tài)勢圖為例，詳細介紹了利用HTML5技術(shù)在網(wǎng)頁上動態(tài)繪制相關(guān)圖形的方法和步驟。文中通過具體的代碼示例和圖形界面，展示了圖像繪制技術(shù)、顏色識別技術(shù)、碰撞檢測技術(shù)在工程實踐中的具體應用。文章結(jié)尾總結(jié)了HTML5的技術(shù)特點以及在當前環(huán)境下的發(fā)展前景。

關(guān)鍵詞：大壩安全 計算機繪圖 HTML5

中圖分類號：TP391 文獻標識碼：A 文章編號：1007-9416（2015）11-0000-00

在大壩安全管理中，大壩安全監(jiān)測數(shù)據(jù)的圖形化展示一直是一個關(guān)注熱點，借助圖形化展示技術(shù)，廣大大壩安全管理人員可以快速直觀的評估大壩目前的安全狀況，并能夠根據(jù)大壩安全監(jiān)測數(shù)據(jù)的變化趨勢，對大壩安全狀況未來的變化態(tài)勢做出預測，提前做好相關(guān)的準備方案。

當前，基于B/S平臺的圖形展示技術(shù)主要有Flash、Sliverlight以及HTML5等。相比較與前兩種技術(shù)方案，HTML5技術(shù)具有如下優(yōu)點：

（1）低技術(shù)風險。HTML5是HTML的一個新版本。HTML5草案的前身名為Web Applications 1.0。它于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團隊。2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。而flash技術(shù)由Adobe公司所有、Sliverlight技術(shù)由Microsoft公司所有，選用這些技術(shù)，均會存在一定的技術(shù)風險。

（2）免插件安裝。由于瀏覽器本身并不支持flash和Sliverlight，因此要使用flash和Sliverlight，必須要先在瀏覽器上安裝安裝相關(guān)的插件，由于瀏覽器安全方面的限制，在瀏覽器上安裝插件往往會出現(xiàn)各種各樣的問題，這已經(jīng)成為影響用戶體驗的一個重要因素。而現(xiàn)代主流的瀏覽器均可原生支持HTML5，不用安裝插件即可直接使用HTML5技術(shù)，這就為廣大用戶提供了更好的用戶體驗。

（3）跨平臺使用。隨著移動技術(shù)的發(fā)展，現(xiàn)在的B/S系統(tǒng)不僅在普通的PC端上使用，也越來越多的在移動端平臺（如手機、平板電腦）上使用。HTML5技術(shù)在這些移動平臺時擁有良好的兼容性。開發(fā)者利用HTML5開發(fā)出一套系統(tǒng)后，即可以在Windows平臺、iOS平臺、Android平臺上運行，大大減少了開發(fā)成本和移植費用。

（4）開發(fā)學習成本較低。HTML5由現(xiàn)有的HTML4發(fā)展而來，對于廣大的Web開發(fā)人員來說，其學習成本較低，能夠很快的掌握相關(guān)的開發(fā)技術(shù)。而反觀flash和Sliverlight，都要重新學習專門的開發(fā)語言，開發(fā)與學習的成本都較高。

本文將以水情態(tài)勢圖的繪制方法為例，詳細介紹HTML5技術(shù)在網(wǎng)頁繪圖方面的具體應用。

水情態(tài)勢圖主要用于實時反映大壩的上下游水位，以及與正常蓄水位以及死水位之間的對比關(guān)系，用戶可以通過水情態(tài)勢圖，直觀準確的了解大壩的水位情況。繪制水情態(tài)勢圖主要經(jīng)過了五個主要步驟。（1）加載背景圖。（2）確定邊界特征顏色值。（3）確定壩頂壩底位置，確定水位與坐標之間的對應關(guān)系。（4）繪制上下游水位。（5）標注出正常蓄水位、汛限水位以及死水位。各個步驟的具體介紹如下：

1）水情態(tài)勢圖的繪制必須以大壩的剖面圖作為背景，因此，加載剖面圖是繪制工作的基礎(chǔ)。我們必須首先在html頁面中定義一個canvas。

然后我們在javascript中取得這個canvas對象，并在canvas上加載背景圖。加載完成后的圖形如圖1。

2）背景圖加載完成后，我們必須識別出背景圖中表示大壩邊界的特征顏色值，確定該顏色值后，才能確定大壩圖形的具體范圍。在獲取大壩邊界的顏色值之前，必要先了解HTML5中圖像的存儲方式。HTML5使用ImageData對象來保存圖像像素值，它有 width、height和 data 三個屬性，其中 data 屬性就是一個連續(xù)數(shù)組，圖像的所有像素點的信息其實是保存在 data 里面的。每個像素點的信息由四個字節(jié)組成。第一個字節(jié)決定像素的紅色值（r），第二個字節(jié)決定像素的綠色值（g），第三個字節(jié)決定像素的藍色值（b），第四個字節(jié)決定像素的透明度值（a）。每一種顏色值的大小是從 0 到 255，而對于透明度來說：0 代表完全透明，255代表完全不透明。

因此，我們到取得圖片里一個[x，y]坐標像素點的紅色值可以用以下公式：

var redValueForPixel = （y * width + x） * 4；

具體到大壩的剖面圖上，我們將剖面圖放大并打上網(wǎng)格線（如圖2），圖中的每一個方格即表示一個像素點，我們可以看到大壩的弧形邊框放大后實際上是由鋸齒形的像素點組成了，這些像素點顏色深淺不一，每四行像素點可分為一組。我們通過研究一組像素點的data 屬性，找出顏色最淺的像素點，并以此點的顏色作為大壩邊界的特征顏色值。

我們以圖片的中線作為起點，向下取得四行像素點的data屬性，然后篩選出所有非空白點的data值。數(shù)據(jù)如表1。

分析上述表格，我們以218作為大壩邊界的特征顏色值。

3）我們從頂部開始，從上往下對圖像進行逐行掃描，當遇到顏色比特征顏色深的像素點，即可視為碰到了圖像的上邊界，這個位置即是圖像中大壩的壩頂位置。反之，我們從底部開始，從下往上對圖像進行逐行掃描，遇到顏色比特征顏色深的像素點，即可視為碰到了圖像的下邊界，這個位置即是圖像中大壩的壩底位置。

我們通過已有的資料可以得知大壩的壩高和壩頂高程，設(shè)大壩的壩高為damHeight，大壩的壩頂高程為damTopElevation，根據(jù)大壩高度與其坐標范圍之間的線形關(guān)系，我們可以得到水位與坐標值之間的轉(zhuǎn)換關(guān)系，代碼如下：

//根據(jù)水位值計算得到坐標位置

//@param level 水位值

//@return 水位值所對應的X坐標

function getPosition（level）{

var val = （（damBottomPosition-damTopPosition）*（damTopElevation-level）/damHeight）+damTopPosition；

return parseInt（val）；

}

4）我們?nèi)匀徊捎弥鹦袙呙杓宇伾葘Φ姆绞絹砝L制上下游水位，我們從水位位置開始一直掃描到壩底位置，如果檢測到了大壩邊界，則繪制一條從該行起點到邊界點的線條。繪制上游水位與繪制下游水位的不同之處在于，上游水位是從左往右進行檢測，下游水位是從右往左進行檢測。繪制上游水位的代碼如下：

//開始繪制

ctx.beginPath（）；

//取得canvas上圖像的像素點信息數(shù)組

var imagedata=ctx.getImageData（leftPoint，0，image.width，image.height）；

//從水位位置到壩底位置進行逐行掃描

for（var j=upWaterLevel；j

for（var i=0；i

//計算像素點信息數(shù)組中存放當前像素點r顏色值的位置

k=4*（image.width*j+i）；

//取得當前像素點r顏色值

var rcolor = imagedata.data[k]；

//當r顏色值比特征顏色值深時

if（rcolor

//選定線條的起點

ctx.moveTo（0， j）；

//畫一條從起點到邊界點的直線

ctx.lineTo（leftPoint+i， j）；

//跳出當前的循環(huán)

break；

}

}

//設(shè)置填充顏色

ctx.strokeStyle = "#C4E1F7"；

//結(jié)束繪制

ctx.closePath（）；

//填充顏色

ctx.stroke（）；

繪制完水面后，我們還需要在水位處繪制一條水位線。

//開始繪制

ctx.beginPath（）；

//在上游水位處從左向右掃描

for（var i=0；i

//計算像素點信息數(shù)組中存放當前像素點r顏色值的位置

k=4*（image.width*upWaterLevel+i）；

//取得當前像素點r顏色值

var rcolor = imagedata.data[k]；

//當r顏色值比特征顏色值深時

if（rcolor

//選定線條的起點

ctx.moveTo（0， upWaterLevel）；

//畫一條從起點到邊界點的直線

ctx.lineTo（leftPoint+i， upWaterLevel）；

//跳出當前的循環(huán)

break；

//設(shè)置填充顏色

ctx.strokeStyle = "blue"；

//結(jié)束繪制

ctx.closePath（）；

//填充顏色

ctx.stroke（）；

我們還需要在水位線上用文字和符號對水位情況進行說明。

//開始繪制

ctx.beginPath（）；

//繪制一個倒三角符號來指示當前水位，signMargin表示符號到邊框的距離，signSize表示符號的大小，即倒三角的邊長

ctx.moveTo（signMargin，upWaterLevel）；

ctx.lineTo（signMargin-signSize*0.5，upWaterLevel-signSize*0.866）；

ctx.lineTo（signMargin+signSize*0.5，upWaterLevel-signSize*0.866）；

//設(shè)置填充顏色

ctx.strokeStyle = "blue"；

//結(jié)束繪制

ctx.closePath（）；

//填充顏色

ctx.stroke（）；

//設(shè)置當前文本基線

ctx.textBaseline = "top"；

//設(shè)置文字顏色

ctx.fillStyle = "blue"；

//設(shè)置文字對齊方式

ctx.textAlign = "left"；

//設(shè)置文字字體

ctx.font = "14px Microsoft YaHei"；

//繪制文字

ctx.fillText（up+"m"， signMargin+signSize，upWaterLevel-signSize）；

繪制后的圖形如圖3。

5）最后，我們在畫圖上標注出正常蓄水位、汛限水位以及死水位。這樣，用戶在查看水情態(tài)勢時可以進行對比分析。正常蓄水位、汛限水位以及死水位的標注方法與上下游水位線的繪制方法類似，只是對線條的長度以及文字符號的位置做了改動，以便達到畫面更加美觀的目的。

最后完成的圖形如圖4。

以上介紹了HTML5在繪制水情態(tài)勢圖時的應用，實際上，HTML5也可用于在大壩安全管理相關(guān)的很多其他圖形表示上，如分布圖，過程線等，借助HTML5技術(shù)的特性，我們可以真正實現(xiàn)“One Web，Any Device”，即我們編寫出一套網(wǎng)頁程序就可以運行在各種終端之上。這在移動設(shè)備越來越發(fā)揮重要作用的今天無疑具有重要意義。

參考文獻

[1] 蔣海洲，吳中如.ADO技術(shù)在大壩安全監(jiān)測中的應用[J].水電能源科學，2002（02）.

[2] 崔玉蘭，郭治清.全國水文自動測報系統(tǒng)建設(shè)評價[J].水文，2002（01）.