TWaver - 專注UI技術

數字圖像處理（Digital Image Processing）又稱為計算機圖像處理，它是指將圖像信號轉換成數字信號并利用計算機對其進行處理的過程。常用的圖像處理方法有圖像增強、復原、編碼、壓縮等，數字圖像處理應用領域非常廣泛。具體關于數字圖像處理的介紹可以參考書籍《岡薩雷斯 數字圖像處理》。
TWaver作為可視化的利器，如果在展示網元的時候，融入圖像處理技術，將會對網元圖標的顯示增加了靈活性，是一件非常有意思的事情。那么我們不妨來試試，如何將圖像處理技術融入進來。
首先我們重寫一個網元CNode，定制用來處理圖像的特殊網元。

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{
//此處處理圖像，并繪制圖像
}
}

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

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.圖像灰度化
灰度化的計算公式如下：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.圖像旋轉

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;
}

圖像旋轉60度

圖像先二值化,再旋轉60度

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

那么使用圖像處理技術可以得到這樣的渲染結果：

怎么樣，效果還不錯吧，需要抓緊聯系我們吧，郵件：jeff.fu@servasoft.com