12.9.使用Convolution Filter创建渐变效果

2023-07-22 12:39:18

字体：大中小

来源：转载

供稿：网友

12.9.1 问题
我想要使用ConvolutionFilter 在MXML 组件上创建一个TweenEffect。
12.9.2 解决办法
创建一个TweenEffectInstance 类，在onTweenUpdate 事件的回调方法中实例化新的
ConvolutionFilter 实例并将这些ConvolutionFilter 实例分配到目标DisplayObject 的过滤器数组。
12.9.3 讨论
ConvolutionFilter 用一种柔和的方式变换它的目标DisplayObject 或BitmapImage，允许效果的创建进行例如模糊，边缘检测，打磨，浮雕和斜角。源图片的每个象素都会根据周围的像素值进行转化。每个象素的转化都由传入ConvolutionFilter 构造器的Matrix 数组参数来决定。ConvolutionFilter 的构造器申明如下：
public function ConvolutionFilter(matrixX:Number = 0, matrixY:Number = 0, matrix:Array
= null, divisor:Number = 1.0, bias:Number = 0.0, preserveAlpha:Boolean = true,
clamp:Boolean = true, color:uint = 0, alpha:Number = 0.0)
一点一点地仔细看看：
matrixX:Number (default = 0)
这个数字代表矩阵的列数。

matrixY:Number (default = 0)
这个指定了矩阵的行数。

matrix:Array (default = null)
这个数组的值用以决定如何转化每个象素。数组内元素的数字个数应与matrixX 乘以matrixY 的结果相同。

divisor:Number (default = 1.0)
该参数指定矩阵转化和ConvolutionFilter 如何应用矩阵计算的约数。如果对矩阵值求和，总和将会是一个平均分配色彩强度的约数。

bias:Number (default = 0.0)
该参数是对矩阵变换结果添加的偏好设置参数。

preserveAlpha:Boolean (default = true)
值为false 表明不保存alpha 值并且convolution 会应用到所有通道，包括alpha 通道。
True 值则表示convolution 仅仅应用到颜色通道。

clamp:Boolean (default = true)
针对源图片之外的像素，值为true 表示会在输入图片边缘处通过复制边缘处的颜色值来扩展图片的边框。值为false 表示会在指定color 和alpha 属性时使用该色值。
默认值是true。

color:uint (default = 0)
十六进制颜色数值，填充源图片周围的边框像素颜色。

alpha:Number (default = 0.0)
填充颜色的透明度。

此处的TweenEffect 类像12.8 节当中的TweenEffect 类一样，在它所使用的TweenEffectInstances 类里面使用ConvolutionFilter。

-ActionScript

package oreilly.cookbook{
import mx.effects.IEffectInstance;
import mx.effects.TweenEffect;
public class ConvolutionTween extends TweenEffect
{
//创建新EffectInstance时可能会传入的值如下：
public var toAlpha:Number;
public var fromAlpha:Number;
public var toColor:uint;
public var fromColor:uint;
public var fromMatrix:Array;
public var toMatrix:Array;
public var toDivisor:Number;
public var fromDivisor:Number;
public var toBias:Number;
public var fromBias:Number;
public function ConvolutionTween(target:Object=null)
{
super(target);
this.instanceClass = ConvolutionTweenInstance;
}

下面是每个新建ConvolutionTweenInstance 类实例属性设置：

-ActionScript

override protected function
initInstance(instance:IEffectInstance):void {
trace(" instance initialized ");
super.initInstance(instance);
// now that we've instantiated our instance, we can set
its properties
ConvolutionTweenInstance(instance).toAlpha = toAlpha;
ConvolutionTweenInstance(instance).fromAlpha =
fromAlpha;
ConvolutionTweenInstance(instance).toColor = toColor;
ConvolutionTweenInstance(instance).fromColor =
fromColor;
ConvolutionTweenInstance(instance).fromMatrix =
fromMatrix;
ConvolutionTweenInstance(instance).toMatrix = toMatrix;
ConvolutionTweenInstance(instance).toDivisor =
toDivisor;
ConvolutionTweenInstance(instance).fromDivisor =
fromDivisor;
ConvolutionTweenInstance(instance).toBias = toBias;
ConvolutionTweenInstance(instance).fromBias = fromBias;
}
override public function getAffectedProperties():Array {
trace(" return all the target properties ");
return [];
}
}
}

ConvolutionTweenInstance 从ConvolutionTweenEffect 工厂类那里获取它的目标对象和属性值。

-ActionScript

package oreilly.cookbook{
import flash.filters.ConvolutionFilter;
import mx.effects.Tween;
import mx.effects.effectClasses.TweenEffectInstance;
public class ConvolutionTweenInstance extends
TweenEffectInstance
{
private var convolutionFilter:ConvolutionFilter;
public var toAlpha:Number;
public var fromAlpha:Number;
public var toColor:uint;
public var fromColor:uint;
public var fromMatrix:Array;
public var toMatrix:Array;
public var toDivisor:Number;
public var fromDivisor:Number;
public var toBias:Number;
public var fromBias:Number;
public function ConvolutionTweenInstance(target:Object) {
super(target);
}

在覆盖的play 方法中，每一个起始值（代表着ConvolutionFilter 的初始化值）和终止值（代表着应用到目标的ConvolutionFilter 的终点值），传入Tween 实例。

-ActionScript

override public function play():void {
this.tween = new Tween(this,
[fromMatrix[0], fromMatrix[1], fromMatrix[2],
fromMatrix[3],fromMatrix[4],fromMatrix[5],
fromMatrix[6], fromMatrix[7], fromDivisor,
fromBias, fromAlpha, fromColor],
[toMatrix[0], toMatrix[1], toMatrix[2], toMatrix[3],
toMatrix[4], toMatrix[5], toMatrix[6], toMatrix[7], ,
toDivisor, toBias, toAlpha, toColor],duration);
convolutionFilter = new ConvolutionFilter(fromMatrixX,
fromMatrixY, fromMatrix, 1.0, 0, true, true,
fromAlpha, fromColor);
}

每个来自Tween 的新值都作为对象传入onTweenUpdate。在该对象内，0 起始的数组里，存储了从初始化状态到结束状态之间任一给定时间点的转换状态值。因为ConvolutionFilter 需要一个数组作为参数，数组里面的每个值都是中间状态值，然后作为ConvolutionFilter 的矩阵参数传入一个新数组。

-ActionScript

override public function onTweenUpdate(value:Object):void {
//get the filters from the target
var filters:Array = target.filters;
// Remove any existing Displacement filter to ensure
that ours is the only one
var n:int = filters.length;
for (var i:int = 0; i < n; i++) {
if (filters[i] is ConvolutionFilter)
filters.splice(i, 1);
} //create the new filter
convolutionFilter = new ConvolutionFilter(3, 3,
[value[0], value[1], value[2], value[3], value[4], value[5],
value[6], value[7]], value[8], value[9] true, true, value[10],
value[11]); //add the filter to the target
filters.push(convolutionFilter);
target.filters = filters;
}
}
}