用as做渐变填充

一直没好好研究过如何用AS设置渐变型填充。周日终于有些时间可以好好研究一下了。

在AS中，设置渐变填充的函数原型为：

flash.display.Graphics.beginGradientFill(
type:String, 
colors:Array,
alphas:Array,
ratios:Array,
matrix:Matrix = null,
spreadMethod:String = "pad",
interpolationMethod:String = "rgb",
focalPointRatio:Number = 0
):void

下面分析各个参数的意义：

type:String — A value from the GradientType class that specifies which gradient type to use: GradientType.LINEAR or GradientType.RADIAL.
[color=blue]渐变类型，值为GradientType.LINEAR（线性）或者GradientType.RADIAL（放射）[/color]

colors:Array — An array of RGB hexadecimal color values to be used in the gradient; for example, red is 0xFF0000, blue is 0x0000FF, and so on. You can specify up to 15 colors. For each color, be sure you specify a corresponding value in the alphas and ratios parameters.
[color=blue]颜色数组， 数组的每个元素都是一个RGB值，最多指定15种颜色。[/color]

alphas:Array — An array of alpha values for the corresponding colors in the colors array; valid values are 0 to 1. If the value is less than 0, the default is 0. If the value is greater than 1, the default is 1.
[color=blue]alpha数组，存放每种颜色的alpha值，与颜色数组中每个元素一一对应，值小于0则置0，值大于1则置为1[/color]

ratios:Array — An array of color distribution ratios; valid values are 0 to 255. This value defines the percentage of the width where the color is sampled at 100%. The value 0 represents the left-hand position in the gradient box, and 255 represents the right-hand position in the gradient box.

[color=blue]ratio数组，存放每种颜色为100%时所处的位置，0代表渐变box中最左侧部位，255代表最右侧部位。数组必须[/color][color=red]严格递增[/color][color=blue]。[/color]

其实colors、alphas和ratios这三个数组就代表着Flash CS中颜色面板里的渐变设置，如下图所示

[img]http://dl.iteye.com/upload/attachment/289891/653049b5-3079-3e40-859d-0355cca41dd9.png[/img]

[color=blue]colors代表的是每个小方格所在位置的颜色，alphas代表每个颜色的不透明度，而ratios则代表着每个小方格的位置[/color]

matrix:Matrix (default = null) — A transformation matrix as defined by the flash.geom.Matrix class. The flash.geom.Matrix class includes a createGradientBox() method, which lets you conveniently set up the matrix for use with the beginGradientFill() method.

[color=blue]转化矩阵，一般使用flash.geom.Matrix.createGradientBox()来建立此矩阵[/color]

spreadMethod:String (default = "pad") — A value from the SpreadMethod class that specifies which spread method to use, either: SpreadMethod.PAD, SpreadMethod.REFLECT, or SpreadMethod.REPEAT.

[color=blue]扩展方式，可选项为 SpreadMethod.PAD（平铺）, SpreadMethod.REFLECT（反射）, or SpreadMethod.REPEAT（重复）.[/color]

interpolationMethod:String (default = "rgb") — A value from the InterpolationMethod class that specifies which value to use: InterpolationMethod.linearRGB or InterpolationMethod.RGB

[color=blue]插入方式(额，好邪恶=。=)，可选项为InterpolationMethod.linearRGB(线性RGB)和InterpolationMethod.RGB(RGB)[/color]

focalPointRatio:Number (default = 0) — A number that controls the location of the focal point of the gradient. 0 means that the focal point is in the center. 1 means that the focal point is at one border of the gradient circle. -1 means that the focal point is at the other border of the gradient circle. A value less than -1 or greater than 1 is rounded to -1 or 1. For example, the following example shows a focalPointRatio set to 0.75:

[color=blue]渐变焦点位置，默认值为0（在中心），-1意味着在渐变圆的一端，1意味着另外一端。[/color]

下面重点来看一下[color=red]flash.geom.Matrix.createGradientBox()[/color]这个函数
它的原型是：

public createGradientBox(
width:Number,
height:Number,
[rotation:Number],
[tx:Number],
[ty:Number]
) : Void

分析各个参数：
width:Number - The width of the gradient box.
height:Number - The height of the gradient box.
[color=blue]Gradient box的长宽，没啥好说的[/color]
rotation:Number [optional] - The amount to rotate, in radians. The default value is 0.
[color=blue]Gradient box的旋转角，注意这里应该以弧度为单位[/color]
tx:Number [optional] - The distance in pixels to translate to the right along the x axis. This value will be offset by half of the width parameter. The default value is 0.
ty:Number [optional] - The distance in pixels to translate down along the y axis. This value will be offset by half of the height parameter. The default value is 0.
[color=blue]x轴和y轴的偏移量[/color]

于是，下边这段代码就可以画出来一个渐变的天空颜色呢：）

			var fillType:String = GradientType.LINEAR;
			var colors:Array = [0x06B0F9, 0xFFFFFF];
			var alphas:Array = [1, 1];
			var ratios:Array = [0x00, 0xFF];
			var matr:Matrix = new Matrix();
			matr.createGradientBox(800, 600, Math.PI/2,0,0);
			var spreadMethod:String = SpreadMethod.PAD;

			var backGround:Shape = new Shape();
			backGround.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);  
			backGround.graphics.drawRect(0,0,800,600);
			backGround.graphics.endFill();
			addChild(backGround);

效果图：

[img]http://dl.iteye.com/upload/attachment/289900/e2afecce-2055-3585-8de7-6b61e7849905.png[/img]