建立漸層線段與填色

Flash Player 9 以及更新的版本，Adobe AIR 1.0 以及更新的版本

定義 Matrix 物件以搭配漸層使用

圖像物件同時可以繪製筆畫與加上漸層 (不只是純色) 的填色。您可透過 lineGradientStyle() 方法來建立漸層筆畫，並使用 beginGradientFill() 方法來建立漸層填色。

兩種方法都可接受使用相同的參數。開頭的四個參數是必要參數：類型、顏色、Alpha 和比例。剩下的四個參數則是選用參數，但是對進階自訂作業卻很有幫助。

前四個參數可指定您所建立的漸層類型。可接受值 GradientType.LINEAR 或 GradientType.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; 
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 物件。