建立漸層線段與填色

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

圖像物件同時可以繪製筆畫與加上漸層 (不只是純色) 的填色。您可透過 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);

上述程式碼使用相同的填色樣式,並指定平均分配紅色、綠色與藍色來繪製三個漸層。繪製漸層時,分別使用了 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 物件