亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

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

        2015-12-26 15:17:36柳翔
        數(shù)字技術(shù)與應(yīng)用 2015年11期

        柳翔

        摘要:本文介紹了在大壩安全監(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).

        伊人久久大香线蕉综合影院首页| 一区二区三区天堂在线| 99人中文字幕亚洲区三| 97一期涩涩97片久久久久久久| 国产一精品一av一免费| 饥渴的熟妇张开腿呻吟视频| 激情亚洲一区国产精品| 精品一精品国产一级毛片| 亚洲av无码一区二区三区性色| 福利在线国产| 2021亚洲色中文字幕| 国产91九色视频在线播放| 日本免费看一区二区三区| 亚洲国产中文字幕一区| 日本熟妇人妻xxxx| 午夜成人无码福利免费视频| 国产最新网站| 欧美深夜福利视频| 国产又黄又湿又爽的免费视频| 中文字幕日韩人妻少妇毛片 | 日韩熟女一区二区三区| 日韩有码在线免费视频| 日本精品视频二区三区| 国产激情电影综合在线看| 少妇太爽了在线观看| 亚洲色大成在线观看| 中文字幕一区二区在线| 国产成人大片在线播放| 国产精品无码无卡无需播放器| 六月婷婷久香在线视频| 国产精品麻豆综合在线| 1234.com麻豆性爰爱影| 亚洲av成人波多野一区二区| 日本一二三区在线观看视频| 久久人人爽人人爽人人片av东京热 | 久久精品无码一区二区三区不| 亚洲欧美v国产蜜芽tv| 中文字幕成人精品久久不卡91| 免费av一区二区三区无码| 少妇性l交大片| 无码高清视频在线播放十区|