as3中颜色矩阵滤镜ColorMatrixFilter的使用
as3中颜色矩阵滤镜ColorMatrixFilter的使用
meteoric
发布于 2018-11-16 15:01:52
发布于 2018-11-16 15:01:52
上面的例子，也是游戏开发中比较常用的功能，与“怪物”战斗后，将其“灰”掉。这其中最重要的还是对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: }在网上搜索到的一些资源：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2012-01-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读