zoukankan      html  css  js  c++  java
  • as3中颜色矩阵滤镜ColorMatrixFilter的使用

    上面的例子,也是游戏开发中比较常用的功能,与“怪物”战斗后,将其“灰”掉。这其中最重要的还是对AS3颜色矩阵滤镜(ColorMatrixFilter)的使用。

    上面实例核心的代码为changeImgGray函数,示例使用flex + sdk3.6编写:

       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>

    随后我在网上找到一个别人写好的as3类ColorMatrixFilterProxy.as

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

    在网上搜索到的一些资源:

    ColorMatrixFilter--颜色矩阵滤镜

    AS3的工具类库—ColorMatrixFilterProxy.as

    Understanding AS3 ColorMatrixFilter class

  • 相关阅读:
    Markdown示例
    初识Markdown
    Ubuntu源整理
    Vi编辑器入门
    Ubuntu,Linux入门系统
    [其他]volatile 关键字
    Qt5:随窗口大小变化背景图片自动缩放的实现
    Qt5:不规则按钮的实现---通过贴图实现
    windows编程:创建DLL
    [转]Firefox拦截12306订票网站的解决办法
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/2316505.html
Copyright © 2011-2022 走看看