TWaver - 專(zhuān)注UI技術(shù)

數(shù)字圖像處理（Digital Image Processing）又稱(chēng)為計(jì)算機(jī)圖像處理，它是指將圖像信號(hào)轉(zhuǎn)換成數(shù)字信號(hào)并利用計(jì)算機(jī)對(duì)其進(jìn)行處理的過(guò)程。常用的圖像處理方法有圖像增強(qiáng)、復(fù)原、編碼、壓縮等，數(shù)字圖像處理應(yīng)用領(lǐng)域非常廣泛。具體關(guān)于數(shù)字圖像處理的介紹可以參考書(shū)籍《岡薩雷斯 數(shù)字圖像處理》。
TWaver作為可視化的利器，如果在展示網(wǎng)元的時(shí)候，融入圖像處理技術(shù)，將會(huì)對(duì)網(wǎng)元圖標(biāo)的顯示增加了靈活性，是一件非常有意思的事情。那么我們不妨來(lái)試試，如何將圖像處理技術(shù)融入進(jìn)來(lái)。
首先我們重寫(xiě)一個(gè)網(wǎng)元CNode，定制用來(lái)處理圖像的特殊網(wǎng)元。

public class CNode extends Node{
public function CNode(id:Object = null){
super(id);
}
override public function get elementUIClass():Class{
return CNodeUI;
}
}

public class CNodeUI extends NodeUI{
private var currentImageAsset:IImageAsset = null;
private var currentComponent:DisplayObject = null;
public function CNodeUI(network:Network, node:Node){
super(network,node);
}

override protected function drawDefaultContent(graphics:Graphics):void{
//此處處理圖像，并繪制圖像
}
}

這樣一個(gè)在TWaver中處理圖像的框架就搭建完成了，只要在上面的drawDefaultContent方法中對(duì)圖像處理并返回繪制，即可實(shí)現(xiàn)圖像的處理。
那么我們先來(lái)看看圖像的常見(jiàn)處理方法,在此說(shuō)明，選擇一張美女圖片作為圖像處理的素材。
1.圖像二值化：將圖像視為二維數(shù)組，遍歷二維數(shù)組，并處理單個(gè)像素的值。實(shí)現(xiàn)灰度化，需要定義一個(gè)顏色(或灰度值)閾值，將圖像中灰度值按照閾值分開(kāi)。

private function doBinary(bd:BitmapData):BitmapData {
var rect:Rectangle = bd.rect;
for(var i:int=rect.x; i<rect.x+rect.width;i++) {
for(var j:int=rect.y; j<rect.y+rect.height;j++) {
var color:uint = bd.getPixel(i,j);
if(color>0x605555){
bd.setPixel(i,j,0xffffff);
}else{
bd.setPixel(i,j,0x00000);
}
}
}
return bd;
}

效果如下：

2.圖像灰度化
灰度化的計(jì)算公式如下：Gary(i,j)=0.299*R(i,j)+0.587*G(i,j)+0.114*B(i,j)；

private function doGray(bd:BitmapData):BitmapData {
var rect:Rectangle = bd.rect;
for(var i:int=rect.x; i for(var j:int=rect.y; j var color = bd.getPixel(i,j);
var rgb:Array = ColorUtils.CombinationToRGB(color);
var gray = (int)(rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114);
bd.setPixel(i,j,ColorUtils.RGBToCombination([gray,gray,gray]));
}
}
return bd;
}


3.圖像旋轉(zhuǎn)

private function doRotate(bd:BitmapData):BitmapData{
var rect:Rectangle = bd.rect;
var m:Matrix = new Matrix();
m.rotate(Math.PI/3);
m.translate(rect.height,0);
var bmp:BitmapData = new BitmapData(bd.height, bd.width,false);
bmp.draw(bd,m);
return bmp;
}

圖像旋轉(zhuǎn)60度

圖像先二值化,再旋轉(zhuǎn)60度

圖像處理的算法很多，在這先拋磚引玉，后面可以支持更新比較復(fù)雜的圖像處理結(jié)果。
有人會(huì)問(wèn)，這樣處理有什么意義呢，具有什么實(shí)際應(yīng)用價(jià)值嗎？
答案是肯定的，任何一種技術(shù)，只要用對(duì)了地方，就會(huì)體現(xiàn)它的價(jià)值，那么圖像處理技術(shù)與TWaver相結(jié)合能擦出什么火花呢？
看下面的demo。
在網(wǎng)元發(fā)生告警的時(shí)候，TWaver傳統(tǒng)方法是通過(guò)混合網(wǎng)元圖片顏色和告警顏色，得到效果如下：

那么使用圖像處理技術(shù)可以得到這樣的渲染結(jié)果：

怎么樣，效果還不錯(cuò)吧，需要抓緊聯(lián)系我們吧，郵件：jeff.fu@servasoft.com