as3中颜色矩阵滤镜ColorMatrixFilter的使用

1: <?xml version="1.0" encoding="utf-8"?>

       2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

       3:     

       4:     <mx:Script>

       5:         <![CDATA[

       6:             

       7:             private function changeImgGray(bool:Boolean=true):void

       8:             {

       9:                 var filter:ColorMatrixFilter;

      10:                 var filterArr:Array = [];

      11:                 var matrix:Array = [];

      12:                 

      13:                 if (bool)

      14:                 {

      15:                     matrix = matrix.concat([0.3086, 0.6094, 0.0820, 0, 0]);        //red

      16:                     matrix = matrix.concat([0.3086, 0.6094, 0.0820, 0, 0]);        //green

      17:                     matrix = matrix.concat([0.3086, 0.6094, 0.0820, 0, 0]);        //blue

      18:                     matrix = matrix.concat([0, 0, 0, 1, 0]);    //alpha

      19:  

      20:                     filter = new ColorMatrixFilter(matrix);

      21:                     filterArr.push(filter);

      22:                 }

      23:                 

      24:                 testContainer.filters = filterArr;

      25:                 

      26:                 grayImg.visible = bool;

      27:             }

      28:             

      29:         ]]>

      30:     </mx:Script>

      31:     

      32:     <mx:Canvas verticalCenter="0" horizontalCenter="0" 

      33:                id="testContainer" 

      34:                borderColor="#ff0000" borderStyle="solid" borderThickness="1">

      35:         

      36:         <mx:Image id="roleImg" source="assets/pic/role.jpg" horizontalCenter="0" verticalCenter="0" />

      37:         

      38:         <mx:Image id="grayImg" source="assets/pic/dead.png" horizontalCenter="0" verticalCenter="0" visible="false" />

      39:         

      40:     </mx:Canvas>

      41:     

      42:     <mx:HBox width="100%" horizontalGap="10" horizontalAlign="center" verticalCenter="-65">

      43:         

      44:         <mx:Button id="setNormalBtn" click="changeImgGray(false)" label="设置正常" />

      45:         

      46:         <mx:Button id="setGrayBtn" click="changeImgGray()" label="设置灰掉" />

      47:         

      48:     </mx:HBox>

      49:     

      50: </mx:Application>

1: package ghostcat.filter

       2: {

       3:     import flash.filters.ColorMatrixFilter;

       4:  

       5:     import ghostcat.debug.Debug;

       6:     import ghostcat.util.core.UniqueCall;

       7:  

       8:     /**

       9:      * 色彩变换滤镜

      10:      *

      11:      * @author flashyiyi

      12:      *

      13:      */

      14:     public dynamic class ColorMatrixFilterProxy extends FilterProxy

      15:     {

      16:         /**

      17:          * 色彩饱和度

      18:          */

      19:         public static const SATURATION:int = 0;

      20:  

      21:         /**

      22:          * 对比度

      23:          */

      24:         public static const CONTRAST:int = 1;

      25:  

      26:         /**

      27:          * 亮度

      28:          */

      29:         public static const BRIGHTNESS:int = 2;

      30:  

      31:         /**

      32:          * 颜色反相

      33:          */

      34:         public static const INVERSION:int = 3;

      35:  

      36:         /**

      37:          * 色相偏移

      38:          */

      39:         public static const HUE:int = 4;

      40:  

      41:         /**

      42:          * 阈值

      43:          */

      44:         public static const THRESHOLD:int = 5;

      45:  

      46:         private var _type:int;

      47:  

      48:         private var _n:int;

      49:  

      50:         private var updateCall:UniqueCall = new UniqueCall(update);

      51:  

      52:         public function ColorMatrixFilterProxy(type:int, n:int)

      53:         {

      54:             super(new ColorMatrixFilter())

      55:             this.type = type;

      56:             this.n = n;

      57:         }

      58:  

      59:         /**

      60:          * 滤镜需要的参数

      61:          * @return

      62:          *

      63:          */

      64:         public function get n():int

      65:         {

      66:             return _n;

      67:         }

      68:  

      69:         public function set n(v:int):void

      70:         {

      71:             _n = v;

      72:             updateCall.invalidate();

      73:         }

      74:  

      75:         /**

      76:          * 滤镜类型

      77:          * @return

      78:          *

      79:          */

      80:         public function get type():int

      81:         {

      82:             return _type;

      83:         }

      84:  

      85:         public function set type(v:int):void

      86:         {

      87:             _type = v;

      88:             updateCall.invalidate();

      89:         }

      90:  

      91:         private function update():void

      92:         {

      93:             switch (type)

      94:             {

      95:                 case SATURATION:

      96:                     changeFilter(createSaturationFilter(n));

      97:                     break;

      98:                 case CONTRAST:

      99:                     changeFilter(createContrastFilter(n));

     100:                     break;

     101:                 case BRIGHTNESS:

     102:                     changeFilter(createBrightnessFilter(n));

     103:                     break;

     104:                 case INVERSION:

     105:                     changeFilter(createInversionFilter());

     106:                     break;

     107:                 case HUE:

     108:                     changeFilter(createHueFilter(n));

     109:                     break;

     110:                 case THRESHOLD:

     111:                     changeFilter(createThresholdFilter(n));

     112:                     break;

     113:                 default:

     114:                     Debug.error("错误的取值")

     115:                     break;

     116:             }

     117:         }

     118:  

     119:         /**

     120:          * 色彩饱和度

     121:          *

     122:          * @param n (N取值为0到255)

     123:          * @return

     124:          *

     125:          */

     126:         public static function createSaturationFilter(n:Number):ColorMatrixFilter

     127:         {

     128:             return new ColorMatrixFilter([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]);

     129:         }

     130:  

     131:         /**

     132:          * 对比度

     133:          *

     134:          * @param n (N取值为0到10)

     135:          * @return

     136:          *

     137:          */

     138:         public static function createContrastFilter(n:Number):ColorMatrixFilter

     139:         {

     140:             return new ColorMatrixFilter([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]);

     141:         }

     142:  

     143:         /**

     144:          * 亮度(N取值为-255到255)

     145:          *

     146:          * @param n

     147:          * @return

     148:          *

     149:          */

     150:         public static function createBrightnessFilter(n:Number):ColorMatrixFilter

     151:         {

     152:             return new ColorMatrixFilter([1, 0, 0, 0, n, 0, 1, 0, 0, n, 0, 0, 1, 0, n, 0, 0, 0, 1, 0]);

     153:         }

     154:  

     155:         /**

     156:          * 颜色反相

     157:          *

     158:          * @return

     159:          *

     160:          */

     161:         public static function createInversionFilter():ColorMatrixFilter

     162:         {

     163:             return new ColorMatrixFilter([-1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0]);

     164:         }

     165:  

     166:         /**

     167:          * 色相偏移

     168:          * @return

     169:          *

     170:          */

     171:         public static function createHueFilter(n:Number):ColorMatrixFilter

     172:         {

     173:             const p1:Number = Math.cos(n * Math.PI / 180);

     174:             const p2:Number = Math.sin(n * Math.PI / 180);

     175:             const p4:Number = 0.213;

     176:             const p5:Number = 0.715;

     177:             const p6:Number = 0.072;

     178:             return new ColorMatrixFilter([p4 + p1 * (1 - p4) + p2 * (0 - p4), p5 + p1 * (0 - p5) + p2 * (0 - p5), p6 + p1 * (0 - p6) + p2 * (1 - p6), 0, 0, p4 + p1 * (0 - p4) + p2 * 0.143, p5 + p1 * (1 - p5) + p2 * 0.14, p6 + p1 * (0 - p6) + p2 * -0.283, 0, 0, p4 + p1 * (0 - p4) + p2 * (0 - (1 - p4)), p5 + p1 * (0 - p5) + p2 * p5, p6 + p1 * (1 - p6) + p2 * p6, 0, 0, 0, 0, 0, 1, 0]);

     179:         }

     180:  

     181:         /**

     182:          * 阈值

     183:          *

     184:          * @param n(N取值为-255到255)

     185:          * @return

     186:          *

     187:          */

     188:         public static function createThresholdFilter(n:Number):ColorMatrixFilter

     189:         {

     190:             return new ColorMatrixFilter([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]);

     191:         }

     192:     }

     193: }