svg濾鏡---顏色矩陣

ColorMatrixFilter色彩矩陣濾鏡;

包 flash.filters
類 public final class ColorMatrixFilter
繼承 ColorMatrixFilter BitmapFilter Object
使用 ColorMatrixFilter 類可以將 4 x 5 矩陣轉(zhuǎn)換應(yīng)用于輸入圖像上的每個(gè)像素的 RGBA 顏色和 Alpha 值,以生成具有一組新的 RGBA 顏色和 Alpha 值的結(jié)果。 該類允許飽和度更改、色相旋轉(zhuǎn)导犹、亮度為 Alpha 以及各種其它效果。 您可以將濾鏡應(yīng)用于任何顯示對(duì)象(即伤提,從 DisplayObject 類繼承的對(duì)象)报腔,例如 MovieClip株搔、SimpleButton、TextField 和 Video 對(duì)象纯蛾,以及 BitmapData 對(duì)象纤房。

注意:對(duì)于 RGBA 值,最高有效字節(jié)代表紅色通道值翻诉,其后的有效字節(jié)分別代表綠色炮姨、藍(lán)色和 Alpha 通道值。

一碰煌、構(gòu)造方法:

ColorMatrixFilter(matrix:Array = null)舒岸;

二、matrix屬性詳解:

注意芦圾;這里的matrix并不是Matrix的實(shí)例蛾派,其實(shí)是一個(gè)Array;

matrix:Array  [read-write]

由 20 個(gè)項(xiàng)目組成的數(shù)組个少,適用于 4 x 5 顏色轉(zhuǎn)換洪乍。 matrix 屬性不能通過直接修改它的值來更改(例如 myFilter.matrix[2] = 1;)。 相反夜焦,必須先獲取對(duì)數(shù)組的引用典尾,對(duì)引用進(jìn)行更改,然后重置該值糊探。

顏色矩陣濾鏡將每個(gè)源像素分離成它的紅色钾埂、綠色、藍(lán)色和 Alpha 成分科平,分別以 srcR褥紫、srcG、srcB 和 srcA 表示瞪慧。 若要計(jì)算四個(gè)通道中每個(gè)通道的結(jié)果髓考,可將圖像中每個(gè)像素的值乘以轉(zhuǎn)換矩陣中的值。 (可選)可以將偏移量(介于 -255 至 255 之間)添加到每個(gè)結(jié)果(矩陣的每行中的第五項(xiàng))中弃酌。 濾鏡將各顏色成分重新組合為單一像素氨菇,并寫出結(jié)果。 在下列公式中妓湘,a[0] 到 a[19] 對(duì)應(yīng)于由 20 個(gè)項(xiàng)目組成的數(shù)組中的條目 0 至 19查蓉,該數(shù)組已傳遞到 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]

對(duì)于數(shù)組中的每個(gè)顏色值,值 1 等于正發(fā)送到輸出的通道的 100%榜贴,同時(shí)保留顏色通道的值豌研。

計(jì)算是對(duì)非相乘的顏色值執(zhí)行的。 如果輸入圖形由預(yù)先相乘的顏色值組成,這些值會(huì)自動(dòng)轉(zhuǎn)換為非相乘的顏色值以執(zhí)行此操作鹃共。

可使用兩種經(jīng)過優(yōu)化的模式:

三鬼佣、理解、體會(huì)霜浴;

matrix是一個(gè)長度為4*5=20的數(shù)組晶衷,其構(gòu)成如下所示:

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的初始狀態(tài)。

下面我分先來分析一下其初始狀態(tài)阴孟。

red通道的值:(1房铭,0,0温眉,0,0)表示翁狐,R通道的乘數(shù)是1(完全保留)类溢,別的道道的的乘數(shù)是0,(不加入別的通道的顏色)露懒,色彩偏移量off是0闯冷;

。懈词。蛇耀。

別的通道依次類推。

下面來做一些效果坎弯,增加對(duì)colorMatrixFilter的認(rèn)識(shí)纺涤;

1、調(diào)整亮度:

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

我們只需要設(shè)置一下RGB的色彩偏移就能調(diào)節(jié)其亮度抠忘,是不是很簡單呢撩炊。

2、顏色反向

-1,0,0,0,255

0,-1,0,0,255

0,0,-1,0,255

0,0,0,1,0

先解釋一下顏色反向:就是把0變?yōu)?55崎脉,255變?yōu)?拧咳,1變?yōu)?54,254變?yōu)?.....

因此囚灼,我們只需把RGB通道的原通道乘數(shù)設(shè)為-1骆膝,然后再把色彩偏移量設(shè)為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三通道的色彩信息設(shè)置成一樣蝎抽;即:R=G=B愉择,那么圖像就變成了灰色,并且,為了保證圖像亮度不變锥涕,同一個(gè)通道中的R+G+B=1:如:0.3086+0.6094+0.0820=1衷戈;

2)、三個(gè)數(shù)字的由來:0.3086, 0.6094, 0.0820层坠;

按理說應(yīng)該把RGB平分殖妇,都是0.3333333。三個(gè)數(shù)字應(yīng)該是根據(jù)色彩光波頻率及色彩心理學(xué)計(jì)算出來的(本人是這么認(rèn)為破花,當(dāng)然也查詢了一些資料谦趣,目前尚未找到準(zhǔn)確答案。

在作用于人眼的光線中座每,彩色光要明顯強(qiáng)于無色光前鹅。對(duì)一個(gè)圖像按RGB平分理論給圖像去色的話,人眼就會(huì)明顯感覺到圖像變暗了(當(dāng)然可能有心理上的原因峭梳,也有光波的科學(xué)依據(jù))另外舰绘,在彩色圖像中能識(shí)別的一下細(xì)節(jié)也可能會(huì)丟失。我假想:可能綠色的一些東西會(huì)丟失葱椭。

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

同樣的RGB捂寿,給人的感覺是綠色最亮,紅色次之孵运,藍(lán)色最暗秦陋。它們的比例大概是3:6:1,即:0.3086, 0.6094, 0.0820
所以治笨,在給圖像去色時(shí)我們保留了大量的G通道信息驳概,使得圖像不至于變暗或者綠色信息不至于丟失(我猜想)。

4旷赖、色彩飽和度
N取值為0到2抡句,當(dāng)然也可以更高。

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杠愧、當(dāng)色彩飽和度低到一定成度的時(shí)候待榔,就想當(dāng)于給圖像去色,所以跟第3條:圖像去色流济,有著千絲萬縷的聯(lián)系锐锣,在此不想過多解釋;
2绳瘟、N為原有通道信息保留量雕憔;可以理解為百分之幾,等于0時(shí)完全去色糖声,小于1時(shí)降低色度斤彼,大于1時(shí)增加色度分瘦,等于2時(shí)色度翻一倍,等于3時(shí)……琉苇。注意:RGB的原有通道信息保留量都應(yīng)該相等嘲玫,不然會(huì)產(chǎn)生偏色。
3并扇、為什么是這樣的計(jì)算公式:
N是原通道色彩保留量:所以去团,在原通道中,我們都+ N穷蛹,這是不能被別的通道瓜分的土陪。剩余的就是(1-N),就讓RGB按0.3086, 0.6094, 0.0820的比例還瓜分這個(gè)剩余量吧肴熏。

5鬼雀、對(duì)比度

//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

分析:

所謂對(duì)比度就是讓紅的更紅,綠的更綠……或反之蛙吏。初一想源哩,我們只需要修改RGB的乘數(shù)(要一至,不然偏色)出刷。可仔細(xì)一琢磨坯辩,不對(duì)馁龟。如果只增加乘數(shù),那么整個(gè)圖像就會(huì)被漂白漆魔,(或反之)坷檩。好,有辦法了改抡,設(shè)置色彩偏移量矢炼,offset。具體要偏移多少呢阿纤,我們找到了一個(gè)折中的方案:128(1-N);即:一幅圖像句灌,不論很亮或很黑,但對(duì)比度為0了欠拾,最終得到的都是一幅中性灰度的圖像(128)胰锌,

6、閾值

所謂閾值藐窄,就是以一個(gè)色度值為基準(zhǔn)對(duì)圖像作非黑即白的處理(注意沒有灰色)资昧,由于不去除了彩色屬性,因此荆忍,也離不開0.3086, 0.6094, 0.0820這三組神奇的數(shù)字格带。

(N取值為0到255)

下面的256也可以改成255撤缴;(那樣就能看到圖一和圖五的小黑點(diǎn)和小白點(diǎ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.3086*256,0.6094*256,0.0820*256,0,-256*N
0, 0, 0, 1, 0

分析:

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

前面我們提及過叽唱,當(dāng)RGB三個(gè)通道的色彩信息一模一樣時(shí)屈呕,圖像就失去了色彩(去色),從0.3086256,0.6094256,0.0820256,0,-256N可以看出:圖像已經(jīng)去色了尔觉,并且凉袱,(*256)亮度已經(jīng)翻了256倍(當(dāng)然也可以是255);我們知道侦铜,RGB的有效值是0-255专甩,即:0,1钉稍,2……255涤躲,把這些值乘以255以后會(huì)出現(xiàn)什么情況呢?但是除了0之外贡未,別的全都大于或等于255了种樱,所以此時(shí)的圖像除了剩有幾個(gè)黑點(diǎn)外,其它的全都變成白色了如圖一(N=0)俊卤;那么現(xiàn)在我們?cè)僮魃势铺幚恚喊裄GB都減去255嫩挤;上次值為255(白色)的現(xiàn)在又變成0(黑色了)超過255的仍然是白色,我們不斷的反復(fù)減255消恍,圖2岂昭,圖3,圖4狠怨,圖5约啊,分別是N=64,N=128佣赖,n=192,n=255時(shí)的圖像:

7恰矩、色彩旋轉(zhuǎn)

所謂色彩旋轉(zhuǎn)就是讓某一個(gè)通道的色彩信息讓另一個(gè)通道去顯示;比如憎蛤,R顯示G的信息外傅,G顯示B的信息,B顯示R的信息俩檬,也可以只拿出一部份信息讓給別的通道去顯示栏豺,至于參數(shù)的瓜分可以平分。不必太講究豆胸,但是奥洼,始終要堅(jiān)持的一個(gè)原則就是每一個(gè)通道中的RGB信息量之和一定要為1,不然將會(huì)生偏色晚胡,如果您要制作偏色效果又另當(dāng)別論灵奖;請(qǐng)償試下面的參數(shù):

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嚼沿、只顯示某個(gè)通道;

1,0,0,0,0

轉(zhuǎn)載自http://www.cnblogs.com/tinytiny/p/3317372.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瓷患,一起剝皮案震驚了整個(gè)濱河市骡尽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌擅编,老刑警劉巖攀细,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異爱态,居然都是意外死亡谭贪,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門锦担,熙熙樓的掌柜王于貴愁眉苦臉地迎上來俭识,“玉大人,你說我怎么就攤上這事洞渔√酌模” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵磁椒,是天一觀的道長堤瘤。 經(jīng)常有香客問我,道長浆熔,這世上最難降的妖魔是什么本辐? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮蘸拔,結(jié)果婚禮上师郑,老公的妹妹穿的比我還像新娘环葵。我一直安慰自己调窍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布张遭。 她就那樣靜靜地躺著邓萨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪菊卷。 梳的紋絲不亂的頭發(fā)上缔恳,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音洁闰,去河邊找鬼歉甚。 笑死,一個(gè)胖子當(dāng)著我的面吹牛扑眉,可吹牛的內(nèi)容都是我干的纸泄。 我是一名探鬼主播赖钞,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼聘裁!你這毒婦竟也來了雪营?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤衡便,失蹤者是張志新(化名)和其女友劉穎献起,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體镣陕,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谴餐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了茁彭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片总寒。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖理肺,靈堂內(nèi)的尸體忽然破棺而出摄闸,到底是詐尸還是另有隱情,我是刑警寧澤妹萨,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布年枕,位于F島的核電站,受9級(jí)特大地震影響乎完,放射性物質(zhì)發(fā)生泄漏熏兄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一树姨、第九天 我趴在偏房一處隱蔽的房頂上張望摩桶。 院中可真熱鬧,春花似錦帽揪、人聲如沸硝清。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽芦拿。三九已至,卻和暖如春查邢,著一層夾襖步出監(jiān)牢的瞬間蔗崎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來泰國打工扰藕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留缓苛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓邓深,卻偏偏與公主長得像未桥,于是被迫代替她去往敵國和親番官。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容