柳翔

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

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

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2015）11-0000-00

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

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

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

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

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

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

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

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

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

然后我們?cè)趈avascript中取得這個(gè)canvas對(duì)象，并在canvas上加載背景圖。加載完成后的圖形如圖1。

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

因此，我們到取得圖片里一個(gè)[x，y]坐標(biāo)像素點(diǎn)的紅色值可以用以下公式：

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

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

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

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

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

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

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

//@param level 水位值

//@return 水位值所對(duì)應(yīng)的X坐標(biāo)

function getPosition（level）{

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

return parseInt（val）；

}

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

//開始繪制

ctx.beginPath（）；

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

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

//從水位位置到壩底位置進(jìn)行逐行掃描

for（var j=upWaterLevel；j

for（var i=0；i

//計(jì)算像素點(diǎn)信息數(shù)組中存放當(dāng)前像素點(diǎn)r顏色值的位置

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

//取得當(dāng)前像素點(diǎn)r顏色值

var rcolor = imagedata.data[k]；

//當(dāng)r顏色值比特征顏色值深時(shí)

if（rcolor

//選定線條的起點(diǎn)

ctx.moveTo（0， j）；

//畫一條從起點(diǎn)到邊界點(diǎn)的直線

ctx.lineTo（leftPoint+i， j）；

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

break；

}

}

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

ctx.strokeStyle = "#C4E1F7"；

//結(jié)束繪制

ctx.closePath（）；

//填充顏色

ctx.stroke（）；

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

//開始繪制

ctx.beginPath（）；

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

for（var i=0；i

//計(jì)算像素點(diǎn)信息數(shù)組中存放當(dāng)前像素點(diǎn)r顏色值的位置

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

//取得當(dāng)前像素點(diǎn)r顏色值

var rcolor = imagedata.data[k]；

//當(dāng)r顏色值比特征顏色值深時(shí)

if（rcolor

//選定線條的起點(diǎn)

ctx.moveTo（0， upWaterLevel）；

//畫一條從起點(diǎn)到邊界點(diǎn)的直線

ctx.lineTo（leftPoint+i， upWaterLevel）；

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

break；

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

ctx.strokeStyle = "blue"；

//結(jié)束繪制

ctx.closePath（）；

//填充顏色

ctx.stroke（）；

我們還需要在水位線上用文字和符號(hào)對(duì)水位情況進(jìn)行說明。

//開始繪制

ctx.beginPath（）；

//繪制一個(gè)倒三角符號(hào)來指示當(dāng)前水位，signMargin表示符號(hào)到邊框的距離，signSize表示符號(hào)的大小，即倒三角的邊長(zhǎng)

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è)置當(dāng)前文本基線

ctx.textBaseline = "top"；

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

ctx.fillStyle = "blue"；

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

ctx.textAlign = "left"；

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

ctx.font = "14px Microsoft YaHei"；

//繪制文字

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

繪制后的圖形如圖3。

5）最后，我們?cè)诋媹D上標(biāo)注出正常蓄水位、汛限水位以及死水位。這樣，用戶在查看水情態(tài)勢(shì)時(shí)可以進(jìn)行對(duì)比分析。正常蓄水位、汛限水位以及死水位的標(biāo)注方法與上下游水位線的繪制方法類似，只是對(duì)線條的長(zhǎng)度以及文字符號(hào)的位置做了改動(dòng)，以便達(dá)到畫面更加美觀的目的。

最后完成的圖形如圖4。

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

參考文獻(xiàn)

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

[2] 崔玉蘭，郭治清.全國(guó)水文自動(dòng)測(cè)報(bào)系統(tǒng)建設(shè)評(píng)價(jià)[J].水文，2002（01）.