Flash/Flex學習筆記(19)：顏色合成與分解的基本原理

傳統的RGB顏色體系中，每一個分量值的範圍都是0到255，如果轉換為2進位的話最多需要8位(比如:十進位的255變成二進位則為11111111)，三個分量加起來，最多需要24位長度的uint來儲存.

而通常我們在html中喜歡用16進位比如"#FF0000"來表示紅色，即R:255,G:0,B:0，如何高效的從一個表示顏色的unit數字中把這RGB分量提取出來？

當然：最容易想到的是利用字串拆分，拆成二個二個一組，然後用:

var r:uint = parseInt("FF",16);trace(r);

來還原，但是這種方法的效率是很低的，先要轉成字串，再拆分，然後再轉為數字。

上面這張圖示範了正確做法的原理，同樣將已知分量合成為顏色值時，也可以用類似處理，只不過順序倒過來而已

R分量：先將其左移16位，推到左側頂端，得到一個包含R分量，其它位置均為0的值

G分量：先將其左移8位，推到中間，得到一個包含G分量，其它位置均為0的值

B分量：不做任何處理

然後將這三個新值，位對位做或運算，只要有值(即1)的部分，就被會保留下來，從而得到新的顏色值。

var color:uint;function drawColorRect(r:uint,g:uint,b:uint) {//直接用位操作合成顏色color=r<<16|g<<8|b; graphics.clear();graphics.beginFill(color);graphics.drawRect(49,43,267,150);graphics.endFill();//lbl1.text = "#" + color.toString(16); 返回16進位的值，不過該值會忽略前置的0//擷取顏色分量var r:uint = color>>16;var g:uint = color>>8 & 0xff;var b:uint = color & 0xff;lbl1.text = "16進位分量還原結果，紅：" + r.toString("16") + "，綠：" + g.toString("16") + "，藍：" + b.toString("16");}txtR.addEventListener(Event.CHANGE,ChangeHandler);txtG.addEventListener(Event.CHANGE,ChangeHandler);txtB.addEventListener(Event.CHANGE,ChangeHandler);function ChangeHandler(e:Event):void {drawColorRect(txtR.value,txtG.value,txtB.value);}drawColorRect(txtR.value,txtG.value,txtB.value);stop();