Graphics類建立漸變線條和填充的方法

as:var s:shape=new shape();

var type:string=gradienttype.linear;

//這是第一個引數，也可以將值設定為gradientfill.radial

var color:array=[0x54d580,0x11056a];

//這是第二個參數，乙個顏色陣列（顏色就隨便啦）

var alph:array=[1,1];

;// 這是第三個引數，設定各個顏色的透明度，和上面的陣列相對應

var ratio:array=[125,225];

//第四個引數，指定比率或每種顏色在漸變中的重要程度，也是要和第一和第乙個引數相對應的

s.graphics.linestyle(2);

//設定筆觸的粗細，要在呼叫linegradientstyle方法之前呼叫linestyle方法，否則線條樣式的值將為 undefined（這結果可是會導致所畫的線條無法顯示，我自己就吃過這方法的虧）

s.graphics.linegradientstyle(type,color,alph,ratio);

//利用上面的引數設定漸變樣式.

s.graphics.moveto(0,0);

// 設定線條起點（10，10）

s.graphics.lineto(250,250);

//畫線到線條結束點（250，250）

addchild(s) ;

//顯示線條

漸變填充 begingradientfill() 方法

as:var sh:shape=new shape();

sh.graphics.begingradientfill(gradienttype.radial,[0x00ff00,0xffdd00],[1,1],[0,225]);

//設定漸變填充樣式，把相應值直接賦給各引數值，不通過變數的傳遞

sh.graphics.moveto(0,0);

//設定曲線起點

sh.graphics.curveto(200,100,200,100);

//畫曲線

sh.graphics .curveto(200,300,200,300);

// 畫曲線

sh.graphics.curveto(100,300,100,300);

// 畫曲線

addchild(sh);

//顯示填充結果

設定了線條樣式之後，可呼叫 clear() 方法會將線條樣式設定回 undefined

graphics類的begingradientfill() 和 linegradientstyle()方法的後四個引數解析

與begingradientfill() 和 linegradientstyle()方法的前四個引數不同的是，後四個引數是可選的，也就是說是可有可無的！但卻可以讓漸變更加的豐富多彩

第五個引數: matrix;……乙個由 flash .geom.matrix 類定義的轉換矩陣。 flash.geom.matrix 類包括 creategradientbox() 方法，通過該方法可以方便地設定矩陣!

第六個引數： spreadmethod:string (default = "pad")；……用於指定要使用哪種 spread 方法的 spreadmethod 類的值

第七個引數： interpolationmethod:string (default = "rgb") ……用於指定要使用哪個值的 interpolationmethod 類的值：

第八個引數： focalpointratio:number (default = 0) — 乙個控制漸變的焦點位置的數字。

下面分別來仔細的解剖以上四個引數！

第五個引數matrix類

第五個引數的值,其實就是用matrix類的creategradientbox方法設定的乙個轉換矩陣!那接下來就講講這個神秘的 creategradientbox()方法;

creategradientbox()方法有以下5個引數:

1.width:number……漸變框的寬度;

2.height:number……漸變框的高度；

3.rotation:number(default=0) ……旋轉量（以弧度為單位）；

4.tx:number(default=0)……沿x軸向平移的距離（以畫素為單位）以值將偏移width引數的一半；

5.ty:number(default=0)……沿y軸向下平移的距離（以畫素為單位）以值將偏移width引數的一半

as: var matr:matrix=new matrix();

matr.creategradientbox(1,1,10,0,0)；

以上5個引數的不同組合將會給漸變還來不同效果哦！至於效果如何就靠大家自己去動手咯！

第六個引數spreadmethod類

spreadmethod 類為 graphics 類的 begingradientfill() 和 linegradientstyle() 方法中的 spreadmethod 引數提供值。spreadmethod提供以下三個常量!使用的不同常量會給漸變帶來不同的外觀,記得自己動手去試下,這樣才能更好的學習嘛!

spreadmethod.pad

spreadmethod.repeat

spreadmethod.reflect

第七個引數interpolationmethod類

interpolationmethod類為 graphics.begingradientfill()和 graphics.linegradientstyle() 方法中的 interpolationmethod 引數提供值。interpolationmethod類提供以下二個常量，使用不同的常量會給漸變帶來不同的外觀

linear-rgb常量：指定應使用線性 rgb 插值方法。

rgb常量：指定應使用 rgb 插值方法。

第八個引數focalpointratio:number

focalpointratio:number (default = 0) — 乙個控制漸變的焦點位置的數字。 0 表示焦點位於中心。 1 表示焦點位於漸變圓的一條邊界上。 -1 表示焦點位於漸變圓的另一條邊界上。小於 -1 或大於 1 的值將捨入為 -1 或 1。這個引數單看這此文字是不能完全明白的，還是那句話，大家自己動手試吧！理論結合實踐才是真理！

綜合as:

var sh:shape=new shape();

var spreadmethod:string=spreadmethod.repeat

//spreadmethod.pad,spreadmethod.repeat, spreadmethod reflect

var matr:matrix=new matrix();

matr.creategradientbox (10,10,50,10,10);

var interpolationmethod:string =interpolationmethod.linear_rgb //interpolationmehtod.rgb

var focalpointratio=0; //1

sh.graphics.begingradientfill(gradienttype.radial,[0x00ff00,0xffdd00],[1,1],[0,225],matr,spreadmethod,interpolationmethod,focalpointratio);

sh.graphics.moveto(1,1);

sh.graphics.curveto(200,100,200,100);

sh.graphics .curveto(200,300,200,300);

sh.graphics.curveto(100,300,100,300)

addchild(sh);

好啦，現在graphics類的begingradientfill() 和 linegradientstyle()方法的8個引數都講完了，雖然有此個引數不是經常用到，不知道也沒關係！但我自己還是比較喜歡完整的東西！上面的文字我是從別的資料裡copy過來，稍做整理而已。希望在as3.0的學習中能給你帶來一點點幫助，嘻嘻……那麼現在，下課吧！

Graphics類建立漸變線條和填充的方法

CSS3重複漸變（線性和徑向漸變）

詳解CSS3漸變（線性和徑向）

建立類和物件

Graphics類建立漸變線條和填充的方法

CSS3重複漸變（線性和徑向漸變）

詳解CSS3漸變（線性和徑向）

建立類和物件

相關推薦