创建渐变线条和填充

Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本

graphics 对象也可以绘制渐变笔触和填充,而不是纯色笔触和填充。渐变笔触是使用 lineGradientStyle() 方法创建的;渐变填充是使用 beginGradientFill() 方法创建的。

这两种方法接受相同的参数。前四个参数是必需的,即类型、颜色、Alpha 以及比率。其余四个参数是可选的,但对于高级自定义非常有用。

  • 第一个参数指定要创建的渐变类型。可接受的值为 GradientType.LINEARGradientType.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() 方法的 rotationtxty 参数不同,但所有其他设置是相同的:

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() 方法的 widthheighttxty 参数也会影响“放射状”渐变填充的大小和位置,如下面的示例所示:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

下面的代码生成了所示的最后一个放射状渐变:

import flash.display.Shape; 
import flash.display.GradientType; 
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,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

请注意,渐变填充的宽度和高度是由渐变矩阵的宽度和高度决定的,而不是由使用 Graphics 对象绘制的宽度和高度决定的。使用 Graphics 对象进行绘制时,您绘制的内容位于渐变矩阵中的这些坐标处。即使使用 Graphics 对象的形状方法之一(如 drawRect()),渐变也不会将其自身伸展到绘制的形状的大小;必须在渐变矩阵本身中指定渐变的大小。

下面说明了渐变矩阵的尺寸和绘图本身的尺寸之间的视觉差异:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

该代码绘制三个具有相同填充样式(使用平均分布的红色、绿色和蓝色指定的)的渐变。这些渐变是使用 drawRect() 方法绘制的,像素宽度分别为 50、100 和 150。beginGradientFill() 方法中指定的渐变矩阵是使用像素宽度 100 创建的。这意味着,第一个渐变仅包含渐变色谱的一半,第二个渐变包含全部色谱,而第三个渐变包含全部色谱以及向右扩展的额外 50 蓝色像素。

lineGradientStyle() 方法的工作方式与 beginGradientFill() 类似,所不同的是,除了定义渐变外,您还必须在绘制之前使用 lineStyle() 方法指定笔触粗细。以下代码绘制一个带有红色、绿色和蓝色渐变笔触的框:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

有关 Matrix 类的详细信息,请参阅使用 Matrix 对象