ColorMatrixFilter色彩矩陣濾鏡;


包 flash.filters 
類 public final class ColorMatrixFilter 
繼承 ColorMatrixFilter  BitmapFilter  Object 
使用 ColorMatrixFilter 類可以將 4 x 5 矩陣轉換應用於輸入圖像上的每個像素的 RGBA 顏色和 Alpha 值,以生成具有一組新的 RGBA 顏色和 Alpha 值的結果。 該類允許飽和度更改、色相旋轉、亮度為 Alpha 以及各種其它效果。 您可以將濾鏡應用於任何顯示對象(即,從 DisplayObject 類繼承的對象),例如 MovieClip、SimpleButton、TextField 和 Video 對象,以及 BitmapData 對象。 
注意:對於 RGBA 值,最高有效字節代表紅色通道值,其后的有效字節分別代表綠色、藍色和 Alpha 通道值。

一、構造方法:

ColorMatrixFilter(matrix:Array = null);

 

二、matrix屬性詳解:

注意;這里的matrix並不是Matrix的實例,其實是一個Array;

matrix:Array  [read-write]

由 20 個項目組成的數組,適用於 4 x 5 顏色轉換。 matrix 屬性不能通過直接修改它的值來更改(例如 myFilter.matrix[2] = 1;)。 相反,必須先獲取對數組的引用,對引用進行更改,然后重置該值。

顏色矩陣濾鏡將每個源像素分離成它的紅色、綠色、藍色和 Alpha 成分,分別以 srcR、srcG、srcB 和 srcA 表示。 若要計算四個通道中每個通道的結果,可將圖像中每個像素的值乘以轉換矩陣中的值。 (可選)可以將偏移量(介於 -255 至 255 之間)添加到每個結果(矩陣的每行中的第五項)中。 濾鏡將各顏色成分重新組合為單一像素,並寫出結果。 在下列公式中,a[0] 到 a[19] 對應於由 20 個項目組成的數組中的條目 0 至 19,該數組已傳遞到 matrix 屬性:

 redResult = (a[0] * srcR) + (a[1] * srcG) + (a[2] * srcB) + (a[3] * srcA) + a[4]

greenResult = (a[5] * srcR) + (a[6] * srcG) + (a[7] * srcB) + (a[8] * srcA) + a[9]

blueResult = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14]

alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19]
 對於數組中的每個顏色值,值 1 等於正發送到輸出的通道的 100%,同時保留顏色通道的值。

計算是對非相乘的顏色值執行的。 如果輸入圖形由預先相乘的顏色值組成,這些值會自動轉換為非相乘的顏色值以執行此操作。

可使用兩種經過優化的模式:

 

三、理解、體會;

matrix是一個長度為4*5=20的數組,其構成如下所示:

var matrix:Array = new Array();

//                                              R  ,G, B,  A, offset
            matrix = matrix.concat([1,  0,  0,  0,  0]); // red
            matrix = matrix.concat([0,  1,  0,  0,  0]); // green
            matrix = matrix.concat([0,  0,  1,  0,  0]); // blue
            matrix = matrix.concat([0,  0,  0,  1,  0]); // alpha

上面是matrix的初始狀態。

下面我分先來分析一下其初始狀態。

red通道的值:(1,0,0,0,0)表示,R通道的乘數是1(完全保留),別的道道的的乘數是0,(不加入別的通道的顏色),色彩偏移量off是0;

。。。

別的通道依次類推。

下面來做一些效果,增加對colorMatrixFilter的認識;

1、調整亮度:

亮度(N取值為-255到255)  
1,0,0,0,N
0,1,0,0,N
0,0,1,0,N
0,0,0,1,0

我們只需要設置一下RGB的色彩偏移就能調節其亮度,是不是很簡單呢。

2、顏色反向
-1,0,0,0,255

0,-1,0,0,255

0,0,-1,0,255

0,0,0,1,0

先解釋一下顏色反向:就是把0變為255,255變為0,1變為254,254變為1.....

因此,我們只需把RGB通道的原通道乘數設為-1,然后再把色彩偏移量設為255就行了

 

3、圖像去色:

0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0    , 0    , 0    , 1, 0

1)、首先了解一下去色原理:只要把RGB三通道的色彩信息設置成一樣;即:R=G=B,那么圖像就變成了灰色,並且,為了保證圖像亮度不變,同一個通道中的R+G+B=1:如:0.3086+0.6094+0.0820=1;

2)、三個數字的由來:0.3086, 0.6094, 0.0820

按理說應該把RGB平分,都是0.3333333。三個數字應該是根據色彩光波頻率及色彩心理學計算出來的(本人是這么認為,當然也查詢了一些資料,目前尚未找到准確答案。

在作用於人眼的光線中,彩色光要明顯強於無色光。對一個圖像按RGB平分理論給圖像去色的話,人眼就會明顯感覺到圖像變暗了(當然可能有心理上的原因,也有光波的科學依據)另外,在彩色圖像中能識別的一下細節也可能會丟失。我假想:可能綠色的一些東西會丟失。

下面是我從PS中對RGB都為255的明度對比圖:

ColorMatrixFilter色彩矩陣濾鏡; - mdzhg - 蝸牛的博客
同樣的RGB,給人的感覺是綠色最亮,紅色次之,藍色最暗。它們的比例大概是3:6:1,即: 0.3086, 0.6094, 0.0820
所以,在給圖像去色時我們保留了大量的G通道信息,使得圖像不至於變暗或者綠色信息不至於丟失(我猜想)。

 

4、色彩飽和度
N取值為0到2,當然也可以更高。
0.3086*(1-N) + N, 0.6094*(1-N)    , 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N) + N, 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N)    , 0.0820*(1-N) + N 0, 0,
0        , 0        , 0        , 1, 0
分析:
1、當色彩飽和度低到一定成度的時候,就想當於給圖像去色,所以跟第3條:圖像去色,有着千絲萬縷的聯系,在此不想過多解釋;
2、N為原有通道信息保留量;可以理解為百分之幾,等於0時完全去色,小於1時降低色度,大於1時增加色度,等於2時色度翻一倍,等於3時……。注意:RGB的原有通道信息保留量都應該相等,不然會產生偏色。
3、為什么是這樣的計算公式:
N是原通道色彩保留量:所以,在原通道中,我們都 + N,這是不能被別的通道瓜分的。剩余的就是( 1-N),就讓RGB按0.3086, 0.6094, 0.0820的比例還瓜分這個剩余量吧。
 

 5、對比度

N取值為0到10
N,0,0,0,128*(1-N)
0,N,0,0,128*(1-N)
0,0,N,0,128*(1-N)
0,0,0,1,0

分析:

所謂對比度就是讓紅的更紅,綠的更綠……或反之。初一想,我們只需要修改RGB的乘數(要一至,不然偏色)。可仔細一琢磨,不對。如果只增加乘數,那么整個圖像就會被漂白,(或反之)。好,有辦法了,設置色彩偏移量,offset。具體要偏移多少呢,我們找到了一個折中的方案:128(1-N);即:一幅圖像,不論很亮或很黑,但對比度為0了,最終得到的都是一幅中性灰度的圖像(128),
 

6、閾值

所謂閾值,就是以一個色度值為基准對圖像作非黑即白的處理(注意沒有灰色),由於不去除了彩色屬性,因此,也離不開0.3086, 0.6094, 0.0820這三組神奇的數字。

(N取值為0到255)

下面的256也可以改成255;(那樣就能看到圖一和圖五的小黑點和小白點);
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0, 0, 0, 1, 0

分析:

先不看最后面的色彩偏移:-256*N

前面我們提及過,當RGB三個通道的色彩信息一模一樣時,圖像就失去了色彩(去色),從0.3086*256,0.6094*256,0.0820*256,0,-256*N可以看出:圖像已經去色了,並且,(*256)亮度已經翻了256倍(當然也可以是255);我們知道,RGB的有效值是0-255,即:0,1,2……255,把這些值乘以255以后會出現什么情況呢?但是除了0之外,別的全都大於或等於255了,所以此時的圖像除了剩有幾個黑點外,其它的全都變成白色了如圖一(N=0);那么現在我們再作色彩偏移處理:把RGB都減去255;上次值為255(白色)的現在又變成0(黑色了)超過255的仍然是白色,我們不斷的反復減255,圖2,圖3,圖4,圖5,分別是N=64,N=128,n=192,n=255時的圖像:

ColorMatrixFilter色彩矩陣濾鏡; - mdzhg - 蝸牛的博客

 
 

7、色彩旋轉

所謂色彩旋轉就是讓某一個通道的色彩信息讓另一個通道去顯示;比如,R顯示G的信息,G顯示B的信息,B顯示R的信息,也可以只拿出一部份信息讓給別的通道去顯示,至於參數的瓜分可以平分。不必太講究,但是,始終要堅持的一個原則就是每一個通道中的RGB信息量之和一定要為1,不然將會生偏色,如果您要制作偏色效果又另當別論;請償試下面的參數

0,1,0,0,0
0,0,1,0,0
1,0,0,0,0
0,0,0,1,0

//---------------

0,0,1,0,0
1,0,0,0,0
0,1,0,0,0
0,0,0,1,0

 

8、只顯示某個通道

1,0,0,0,0


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM