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

简介: 上面的例子,也是游戏开发中比较常用的功能,与“怪物”战斗后,将其“灰”掉。这其中最重要的还是对AS3颜色矩阵滤镜(ColorMatrixFilter)的使用。   上面实例核心的代码为changeImgGray函数,示例使用flex + sdk3.

上面的例子,也是游戏开发中比较常用的功能,与“怪物”战斗后,将其“灰”掉。这其中最重要的还是对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

目录
相关文章
|
4月前
|
计算机视觉
OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
44 0
|
9月前
Photoshop极坐标滤镜巧绘三维游泳圈
Photoshop极坐标滤镜巧绘三维游泳圈
48 0
|
计算机视觉
五、OpenCV绘制线、矩形、圆等基本几何形状
通过javaOpenCV中的Imgproc函数进行简单几何图形的绘制
99 0
五、OpenCV绘制线、矩形、圆等基本几何形状
|
并行计算 iOS开发 MacOS
Metal每日分享,4x4颜色矩阵滤镜效果
Metal每日分享,4x4颜色矩阵滤镜效果
Metal每日分享,4x4颜色矩阵滤镜效果
|
计算机视觉
三天学会opencv(七)——绘制形状与文字
三天学会opencv(七)——绘制形状与文字
105 0
|
算法 安全 API
OpenCV 绘制形状与文字
OpenCV 绘制形状与文字
193 0
OpenCV 绘制形状与文字
|
算法 API 计算机视觉
OpenCV 轮廓周围绘制矩形框和圆形框
OpenCV 轮廓周围绘制矩形框和圆形框
182 0
OpenCV 轮廓周围绘制矩形框和圆形框
在画图软件中,可以画出不同大小或颜色的圆形、矩形等几何图形。几何图形之间有许多共同的特征,如它们可以是用某种颜色画出来的,可以是填充的或者不填充的。
编写Java程序:在画图软件中,可以画出不同大小或颜色的圆形、矩形等几何图形。几何图形之间有许多共同的特征,如它们可以是用某种颜色画出来的,可以是填充的或者不填充的。
|
算法 计算机视觉 Python
霍夫变换绘制出图案里的直线
霍夫变换绘制出图案里的直线