这是Making Things Move for AS3版教材中的一节笔记。
Part One ActionScripted Animation__Chapter 4 Rendering Techniques
Page128 ~133
从教程范例中挑出以下三个关于色彩和渐变的方法做补充解释,以便加深了解flash绘制渐变等的原理过程。(P.S.主要是我没理解透的)
先了解些相关知识,flash绘画填充是按照先创建画笔或填充色,然后再用该对象向指定的区域(线条)进行绘制。好,先看头两个方法的定义及说明:
beginGradientFill(GradentType, color, alpha, ratio, matrix);
| 参数: | 1.渐变类型 2.渐变颜色数组 3.各颜色透明度数组 4.分布比例数组 5.matrix数组 |
该方法用于创建渐变填充画笔,前四种都好理解,主要是matrix数组含义,因此在运行该方法前,需要调用下面的方法为matrix属性赋值。
matrix.createGradientBox(width, height, rotation, x, y);
| 参数: | 1.渐变宽度 2.渐变高度 3.旋转角度 4.渐变起始x坐标 5.渐变起始y坐标 |
该方法用于创建渐变区域,这是渐变的范围!绘制渐变需要理解两个区域,一个是实际需要填充的区域对象,一个是渐变自身的区域,相当于我们创建了渐变区域后在把它放到填充区域内,只有目标填充区域内部才是可见的部分。因此,通过分别设定两部分坐标会有不同的效果。 下面是一段比较完整的绘制渐变图形代码
graphics.lineStyle(1);
var colors:Array = [0xffffff, 0xff0000];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
//定义matrix区域
var matrix:Matrix = new Matrix();
matrix.createGradientBox(100, 100, 0, 0, 0);
//定义渐变
graphics.beginGradientFill(GradientType.LINEAR, colors,
alphas, ratios, matrix);
//向目标区域绘制填充
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();
以上结束,再看另外一个方法:
| ColorTransform | (redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) |
教材中有这么一公式用来表明其计算新颜色的步骤
newRed = oldRed * redMultiplier + redOffset;
最初按照我的理解,只要在变量中填入乘积因子和指定偏移量,那么每次调用该方法时,应该自动计算出新的颜色,因此测试一个通过鼠标点击进行变换颜色的效果,每次点击后都执行如下:
public function clickHandler(event:MouseEvent):void {
event.target.transform.colorTransform = new ColorTransform(1, 1, 1, 1, -20,-25, 25, -0.9);
}
但除了第一次有颜色变化外,继续点击均无反应。
经过论坛求助得到解答:
public function clickHandler(event:MouseEvent):void {
var trans:ColorTransform = event.target.transform.colorTransform;
event.target.transform.colorTransform=new ColorTransform(1,1,1,1,trans.redOffset-25,trans.greenOffset,trans.greenOffset + 25,trans.alphaOffset-10);
}
从测试情况,似乎redMultiplier等乘积因子没发挥什么作用,并不像上面计算公式的运行原理。而是直接通过redOffset等对各色彩进行定义。这个问题还没有完全搞明白?还要后期不断测试,希望有朋友能指点一下哈。