[AS3] Graphics.beginGradientFill() → 漸層填色

Graphics.beginGradientFill()
public function beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

Matrix.createGradientBox()
public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

GradientType、SpreadMethod class

Graphics.beginGradientFill()
public function beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

1. type:String —使用 GradientType 類別的常數指定要用哪個漸層模式：GradientType.LINEAR 或 GradientType.RADIAL。
2. colors:Array —  colors 參數的資料型態是陣列，由漸層中各個 RGB 十六進位顏色值做為陣列元素 (例如，紅色是 0xFF0000 等等)。可以指定多達 15 種顏色。 務必針對每一種顏色，在 alphas 和 ratios 參數中指定相對應的值。
3. alphas:Array — Alpha 值的陣列，對應到 colors 陣列中的顏色，有效值從 0 到 1。 如果值小於 0，則預設為 0。 如果值大於 1，則預設為 1。
4. ratios:Array — 顏色分佈比例的陣列；有效值為 0 到 255。此值會定義寬度 (其中顏色是以 100% 的比例進行取樣) 的百分比。 值 0 代表位於漸層方塊的左邊位置，而值 255 代表漸層方塊的右邊位置。陣列中的值必須依序增加；例如 [0, 63, 127, 190, 255]。
5. matrix:Matrix (default = null) — flash.geom.Matrix 類別所定義的變形矩陣。以 flash.geom.Matrix 類別的 createGradientBox() 方法設定矩陣，以便與 beginGradientFill() 方法搭配使用。
6. spreadMethod:String (default = "pad") — 以SpreadMethod 類別的常數可用來指定要使用哪個散佈方式：SpreadMethod.PAD、SpreadMethod.REFLECT 或 SpreadMethod.REPEAT。
7. interpolationMethod:String (default = "rgb") —  指定要用哪個 InterpolationMethod 類別 ( 內插補點方式 ) 的常數：InterpolationMethod.LINEAR_RGB 或 InterpolationMethod.RGB 。不同的內插補點方法將會產生不同的外觀 。
8. focalPointRatio:Number (default = 0) — 這是一個數字，用來控制漸層的焦點位置。 0 表示焦點位於正中央。 1 表示焦點位於漸層圓圈的其中一個邊界。 -1 表示焦點位於漸層圓圈的另一個邊界。 小於 -1 或大於 1 的值會化為整數 -1 或 1。

Matrix.createGradientBox()
public function createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void

1. width:Number — 漸層方塊的寬度。
2. height:Number — 漸層方塊的高度。
3. rotation:Number (default = 0) — 旋轉量，以弧度為單位。
4. tx:Number (default = 0) — 沿著 x 軸向右轉移的距離，以為像素單位。 這個值是根據 width 參數的一半進行偏移。
5. ty:Number (default = 0) — 沿著 y 軸向下轉移的距離，以為像素單位。 這個值是根據 height 參數的一半進行偏移。

1001123_Graphics.beginGradientFill.swf

package  {
 
 import flash.display.Sprite;
 import flash.display.Graphics;
 import flash.display.GradientType;
 import flash.geom.Matrix;
 import flash.display.SpreadMethod;
 
 public class BeginGradientFill_1001123_1 extends Sprite {
  
  public var canvas:Sprite;
  public var colorA:uint=0x000000;
  public var colorB:uint=0xFFFFFF;
  public var colorMix:String;
  
  public function BeginGradientFill_1001123_1() {
   this.colorA = 0xaabbff;
   this.colorB = 0xFFFF00;
   this.createfigures();
   return;
  }

  private function createfigures():void{
   this.canvas = new Sprite();
   var _myGraphics:Graphics = this.canvas.graphics;
   
   var type:String = GradientType.LINEAR;
   var colors:Array = [this.colorA,this.colorB];
   var alphas:Array = [1,1];
   /*ratios陣列的元素值範圍必須在0~255之間, 
     若超過範圍，漸層填色會失效, 且無錯誤訊息*/
   var ratios:Array = [0,255];
   var matrix:Matrix = new Matrix();
   /**/
   matrix.createGradientBox(200,200,45*Math.PI/180,200,0);
   var spreadMethod:String = SpreadMethod.PAD;
   /*var spreadMethod:String = SpreadMethod.REFLECT;*/
   var interpolationMethod:String = "rgb";
   var focalPointRatio:Number = 0;  
   
   _myGraphics.beginGradientFill(type,colors,alphas,ratios,matrix,
            spreadMethod,interpolationMethod,focalPointRatio);
   _myGraphics.drawRect(0,0,400,300);
   
   this.addChild(this.canvas);
   this.canvas.x = 75;
   this.canvas.y = 50;
   return;
  }
 }
 
}

※ 將 var spreadMethod:String = SpreadMethod.PAD;
改成 var spreadMethod:String = SpreadMethod.REFLECT;
漸層分佈方式就有不同面貌

1001123_Graphics.beginGradientFill_b.swf



若修改這兩行
※ var type:String = GradientType.RADIAL;
※ var spreadMethod:String = SpreadMethod.REFLECT;

1001123_Graphics.beginGradientFill_c.swf