- 相關(guān)推薦
基于HTML5技術(shù)的大壩安全監(jiān)測(cè)圖像繪制技術(shù)
摘要：本文介紹了在大壩安全監(jiān)測(cè)的圖形化展示領(lǐng)域中，HTML5技術(shù)對(duì)比其他技術(shù)所具有的優(yōu)點(diǎn)，并以水情態(tài)勢(shì)圖為例，詳細(xì)介紹了利用HTML5技術(shù)在網(wǎng)頁(yè)上動(dòng)態(tài)繪制相關(guān)圖形的方法和步驟。文中通過(guò)具體的代碼示例和圖形界面，展示了圖像繪制技術(shù)、顏色識(shí)別技術(shù)、碰撞檢測(cè)技術(shù)在工程實(shí)踐中的具體應(yīng)用。文章結(jié)尾總結(jié)了HTML5的技術(shù)特點(diǎn)以及在當(dāng)前環(huán)境下的發(fā)展前景。
關(guān)鍵詞：大壩安全 HTML5 計(jì)算機(jī)繪圖
在大壩安全管理中，大壩安全監(jiān)測(cè)數(shù)據(jù)的圖形化展示一直是一個(gè)關(guān)注熱點(diǎn)，借助圖形化展示技術(shù)，廣大大壩安全管理人員可以快速直觀的評(píng)估大壩目前的安全狀況，并能夠根據(jù)大壩安全監(jiān)測(cè)數(shù)據(jù)的變化趨勢(shì)，對(duì)大壩安全狀況未來(lái)的變化態(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àn)維網(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)各種各樣的問(wèn)題，這已經(jīng)成為影響用戶(hù)體驗(yàn)的一個(gè)重要因素。而現(xiàn)代主流的瀏覽器均可原生支持HTML5，不用安裝插件即可直接使用HTML5技術(shù)，這就為廣大用戶(hù)提供了更好的用戶(hù)體驗(yàn)。
(3)跨平臺(tái)使用。隨著移動(dòng)技術(shù)的發(fā)展，現(xiàn)在的B/S系統(tǒng)不僅在普通的PC端上使用，也越來(lái)越多的在移動(dòng)端平臺(tái)(如手機(jī)、平板電腦)上使用。HTML5技術(shù)在這些移動(dòng)平臺(tái)時(shí)擁有良好的兼容性。開(kāi)發(fā)者利用HTML5開(kāi)發(fā)出一套系統(tǒng)后，即可以在Windows平臺(tái)、iOS平臺(tái)、Android平臺(tái)上運(yùn)行，大大減少了開(kāi)發(fā)成本和移植費(fèi)用。
(4)開(kāi)發(fā)學(xué)習(xí)成本較低。HTML5由現(xiàn)有的HTML4發(fā)展而來(lái)，對(duì)于廣大的Web開(kāi)發(fā)人員來(lái)說(shuō)，其學(xué)習(xí)成本較低，能夠很快的掌握相關(guān)的開(kāi)發(fā)技術(shù)。而反觀flash和Sliverlight，都要重新學(xué)習(xí)專(zhuān)門(mén)的開(kāi)發(fā)語(yǔ)言，開(kāi)發(fā)與學(xué)習(xí)的成本都較高。
本文將以水情態(tài)勢(shì)圖的繪制方法為例，詳細(xì)介紹HTML5技術(shù)在網(wǎng)頁(yè)繪圖方面的具體應(yīng)用。
水情態(tài)勢(shì)圖主要用于實(shí)時(shí)反映大壩的上下游水位，以及與正常蓄水位以及死水位之間的對(duì)比關(guān)系，用戶(hù)可以通過(guò)水情態(tài)勢(shì)圖，直觀準(zhǔn)確的了解大壩的水位情況。繪制水情態(tài)勢(shì)圖主要經(jīng)過(guò)了五個(gè)主要步驟。(1)加載背景圖。(2)確定邊界特征顏色值。(3)確定壩頂壩底位置，確定水位與坐標(biāo)之間的對(duì)應(yīng)關(guān)系。(4)繪制上下游水位。(5)標(biāo)注出正常蓄水位、汛限水位以及死水位。各個(gè)步驟的具體介紹如下：
1)水情態(tài)勢(shì)圖的繪制必須以大壩的剖面圖作為背景，因此，加載剖面圖是繪制工作的基礎(chǔ)。我們必須首先在html頁(yè)面中定義一個(gè)canvas。
然后我們?cè)趈avascript中取得這個(gè)canvas對(duì)象，并在canvas上加載背景圖。加載完成后的圖形如圖1。
2)背景圖加載完成后，我們必須識(shí)別出背景圖中表示大壩邊界的特征顏色值，確定該顏色值后，才能確定大壩圖形的具體范圍。在獲取大壩邊界的顏色值之前，必要先了解HTML5中圖像的存儲(chǔ)方式。HTML5使用ImageData對(duì)象來(lái)保存圖像像素值，它有 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ì)于透明度來(lái)說(shuō)：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)可分為一組。我們通過(guò)研究一組像素點(diǎn)的data 屬性，找出顏色最淺的像素點(diǎn)，并以此點(diǎn)的顏色作為大壩邊界的特征顏色值。
我們以圖片的中線作為起點(diǎn)，向下取得四行像素點(diǎn)的data屬性，然后篩選出所有非空白點(diǎn)的data值。數(shù)據(jù)如表1。
分析上述表格，我們以218作為大壩邊界的特征顏色值。
3)我們從頂部開(kāi)始，從上往下對(duì)圖像進(jìn)行逐行掃描，當(dāng)遇到顏色比特征顏色深的像素點(diǎn)，即可視為碰到了圖像的上邊界，這個(gè)位置即是圖像中大壩的壩頂位置。反之，我們從底部開(kāi)始，從下往上對(duì)圖像進(jìn)行逐行掃描，遇到顏色比特征顏色深的像素點(diǎn)，即可視為碰到了圖像的下邊界，這個(gè)位置即是圖像中大壩的壩底位置。
我們通過(guò)已有的資料可以得知大壩的壩高和壩頂高程，設(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ì)的方式來(lái)繪制上下游水位，我們從水位位置開(kāi)始一直掃描到壩底位置，如果檢測(cè)到了大壩邊界，則繪制一條從該行起點(diǎn)到邊界點(diǎn)的線條。繪制上游水位與繪制下游水位的不同之處在于，上游水位是從左往右進(jìn)行檢測(cè)，下游水位是從右往左進(jìn)行檢測(cè)。繪制上游水位的代碼如下：
//開(kāi)始繪制
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);
//畫(huà)一條從起點(diǎn)到邊界點(diǎn)的直線
ctx.lineTo(leftPoint+i， j);
//跳出當(dāng)前的循環(huán)
break;
}
}
//設(shè)置填充顏色
ctx.strokeStyle = "#C4E1F7";
//結(jié)束繪制
ctx.closePath();
//填充顏色
ctx.stroke();
繪制完水面后，我們還需要在水位處繪制一條水位線。
//開(kāi)始繪制
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);
//畫(huà)一條從起點(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)行說(shuō)明。
//開(kāi)始繪制
ctx.beginPath();
//繪制一個(gè)倒三角符號(hào)來(lái)指示當(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è)诋?huà)圖上標(biāo)注出正常蓄水位、汛限水位以及死水位。這樣，用戶(hù)在查看水情態(tài)勢(shì)時(shí)可以進(jìn)行對(duì)比分析。正常蓄水位、汛限水位以及死水位的標(biāo)注方法與上下游水位線的繪制方法類(lèi)似，只是對(duì)線條的長(zhǎng)度以及文字符號(hào)的位置做了改動(dòng)，以便達(dá)到畫(huà)面更加美觀的目的。
最后完成的圖形如圖4。
以上介紹了HTML5在繪制水情態(tài)勢(shì)圖時(shí)的應(yīng)用，實(shí)際上，HTML5也可用于在大壩安全管理相關(guān)的很多其他圖形表示上，如分布圖，過(guò)程線等，借助HTML5技術(shù)的特性，我們可以真正實(shí)現(xiàn)“One Web，Any Device”，即我們編寫(xiě)出一套網(wǎng)頁(yè)程序就可以運(yùn)行在各種終端之上。這在移動(dòng)設(shè)備越來(lái)越發(fā)揮重要作用的今天無(wú)疑具有重要意義。
參考文獻(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).
【基于HTML5技術(shù)的大壩安全監(jiān)測(cè)圖像繪制技術(shù)】相關(guān)文章：
基于圖像的OMR技術(shù)的實(shí)現(xiàn)03-07
水庫(kù)大壩安全監(jiān)測(cè)自動(dòng)化技術(shù)探究論文11-14
基于內(nèi)容的模糊圖像檢索技術(shù)研究03-18
基于圖像處理技術(shù)的織物組織自動(dòng)識(shí)別03-07
基于Zigbee的無(wú)線傳感器網(wǎng)絡(luò)在大壩安全監(jiān)測(cè)系統(tǒng)中的應(yīng)用03-07
基于FPGA/CPLD和USB技術(shù)的無(wú)損圖像采集卡03-18
基于BSTR1011碼流收發(fā)卡的監(jiān)測(cè)技術(shù)11-22
基于探針與NetFlow的高速網(wǎng)絡(luò)流量監(jiān)測(cè)技術(shù)的研究與實(shí)現(xiàn)03-07