graphics 对象也可以绘制渐变笔触和填充,而不是纯色笔触和填充。渐变笔触是使用 lineGradientStyle() 方法创建的;渐变填充是使用 beginGradientFill() 方法创建的。
这两种方法接受相同的参数。前四个参数是必需的,即类型、颜色、Alpha 以及比率。其余四个参数是可选的,但对于高级自定义非常有用。
第一个参数指定要创建的渐变类型。可接受的值是 GradientFill.LINEAR 或 GradientFill.RADIAL。
第二个参数指定要使用的颜色值的数组。在线性渐变中,将从左向右排列颜色。在放射状渐变中,将从内到外排列颜色。数组颜色的顺序表示在渐变中绘制颜色的顺序。
第三个参数指定前一个参数中相应颜色的 Alpha 透明度值。
第四个参数指定比率或每种颜色在渐变中的重要程度。可接受的值范围是 0-255。这些值并不表示任何宽度或高度,而是表示在渐变中的位置;0 表示渐变开始,255 表示渐变结束。比率数组必须按顺序增加,并且包含的条目数与第二个和第三个参数中指定的颜色和 Alpha 数组相同。
虽然第五个参数(转换矩阵)是可选的,但通常会使用该参数,因为它提供了一种简便且有效的方法来控制渐变外观。此参数接受 Matrix 实例。为渐变创建 Matrix 对象的最简单方法是使用 Matrix 类的 createGradientBox() 方法。
定义 Matrix 对象以用于渐变
可以使用 flash.display.Graphics 类的 beginGradientFill() 和 lineGradientStyle() 方法来定义在形状中使用的渐变。定义渐变时,需要提供一个矩阵作为这些方法的其中一个参数。
定义矩阵的最简单方法是使用 Matrix 类的 createGradientBox() 方法,该方法创建一个用于定义渐变的矩阵。可以使用传递给 createGradientBox() 方法的参数来定义渐变的缩放、旋转和位置。createGradientBox() 方法接受以下参数:
渐变框宽度:渐变扩展到的宽度(以像素为单位)
渐变框高度:渐变扩展到的高度(以像素为单位)
渐变框旋转:将应用于渐变的旋转角度(以弧度为单位)
水平平移:将渐变水平移动的距离(以像素为单位)
垂直平移:将渐变垂直移动的距离(以像素为单位)
例如,假设渐变具有以下特性:
GradientType.LINEAR
绿色和蓝色这两种颜色(ratios 数组设置为 [0, 255])
SpreadMethod.PAD
InterpolationMethod.LINEAR_RGB
下面的示例显示的是几种渐变,如图所示,它们的 createGradientBox() 方法的 rotation 参数不同,但所有其它设置是相同的:
width = 100; height = 100; rotation = 0; tx = 0; ty = 0; |
width = 100; height = 100; rotation = Math.PI/4; // 45° tx = 0; ty = 0; |
width = 100; height = 100; rotation = Math.PI/2; // 90° tx = 0; ty = 0; |
下面的示例显示的是绿到蓝线性渐变的效果,如图所示,它们的 createGradientBox() 方法的 rotation、tx 和 ty 参数不同,但所有其它设置是相同的:
width = 50; height = 100; rotation = 0; tx = 0; ty = 0; |
width = 50; height = 100; rotation = 0 tx = 50; ty = 0; |
width = 100; height = 50; rotation = Math.PI/2; // 90° tx = 0; ty = 0; |
width = 100; height = 50; rotation = Math.PI/2; // 90° tx = 0; ty = 50; |
createGradientBox() 方法的 width、height、tx 和 ty 参数也会影响“放射状”渐变填充的大小和位置,如下面的示例所示:
width = 50; height = 100; rotation = 0; tx = 25; ty = 0; |
下面的代码生成了所示的最后一个放射状渐变:
import flash.display.Shape;
import flash.display.GradientType;
[NextPage]
import flash.geom.Matrix;
var type:String = GradientType.RADIAL;
var colors:Array = [0x00FF00, 0x000088];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;
var matrix:Matrix = new Matrix();
var boxWidth:Number = 50;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI/2; // 90°
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
var square:Shape = new Shape;
square.graphics.beginGradientFill(type,
colors,
alphas,
ratios,
标签:as3,matrix,tx,ty,渐变,var,100,rotation From: https://blog.51cto.com/u_4387387/6320007