建立漸層線段與填色

您可以使用 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; 
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);

上述程式碼使用相同的填色樣式，並指定平均分配紅色、綠色與藍色來繪製三個漸層。繪製漸層時，分別使用了 50、100，與 150 像素寬度的 drawRect() 方法。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 物件。