Gradient Fill

利用graphics.beginGradientFill()將shape以漸層的方式填滿, 是相當常用的技巧之一.
比較複雜的是它的參數,不過我們通常只需定義前五個.

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

第一個參數是 GradientFill的種類,actionscript有linear及radial兩種.
第二個參數是 顏色個數array.
第三個參數是 透明度array.
第四個參數是 色素?的變化範圍array.
第五個參數是 transform matrix,用來translate 及 rotate Gradient, 可以利用matrix.createGradientBox()來設定. prototype如下:
createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void


有一點值得注意的是, 前述的array, 它們的個數必須一致, 否則無法顯示GradientFill的效果,但也不會丟出任何錯誤訊息.

demo:http://imlab.cs.nccu.edu.tw/~pie/GradientFill.swf
<br />package redbug.draw<br />{<br /> import flash.display.GradientType;<br /> import flash.display.Sprite;<br /> import flash.geom.Matrix;<br /> <br /> public class GradientFill extends Sprite<br /> { private const px:int = 100;<br /> private const py:int = 100;<br /> private const w:int = 200;<br /> private const h:int = 200;<br /> <br /> public function GradientFill()<br /> {<br /> init();<br /> }<br /> <br /> private function init():void<br /> {<br /> graphics.lineStyle(1);<br /> var colors:Array = [0x000000, 0xff0000];<br /> var alphas:Array = [1, 0];<br /> var ratios:Array = [0, 255];<br /> var matrix:Matrix = new Matrix();<br /> matrix.createGradientBox(w, h, Math.PI/4, px, py);<br /> graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);<br /> graphics.drawRect(px, py, w, h);<br /> graphics.endFill();<br /> }<br /> }<br />}<br /><br />