Aswing入門教程 1.6 顏色和填充

作者：胡礦，iiley，Bill

?

?

著作權所有，請勿轉載

?

?

www.flashseer.org

?

Google Doc

http://docs.google.com/Doc?id=dnp8gdz_16d63xzw

?

?

?

??? Graphics2D允許你利用刷子對象（Bursh）來進行顏色填充。如果要使用多種顏色來填充，那么你可以先選擇一種顏色，進行填充；然后再選擇另一種顏色，再進行填充。

?

??? ASColor類被用來定義顏色。org.aswing.ASColor類提供了代表16種常用顏色的常量值，如表1.6-1所示

表1.6-1

WHITE	BLACK	HALO_ORANGE	MAGENTA
LIGHT_GRAY	RED	YELLOW	CYAN
GRAY	PINK	GREEN	BLUE
DARK_GRAY	ORANGE	HALO_GREEN	HALO_BLUE

?

??? 例如：

var?brush:IBrush =?new?SolidBrush(ASColor.RED);
g2.fillRectangle(brush, x, y, width, height);?

?

????你可以通過創建ASColor對象來定制顏色，這時侯需要提供該顏色的紅、綠、藍顏色構成。三種顏色都是用0-255，即0x00-0xFF（也就是一個字節）之間的整數表示的，ASColor的構造器如下：

?ASColor (rgb:uint=0x000000, alpha:Number=1)

?

??? 下面是個定制顏色的例子：

var?brush:IBrush =?new?SolidBrush(ASColor.getASColor(0, 128, 128)); //?灰暗的藍綠色,也可以用new?ASColor(0x008888)構建這個顏色
g2.fillRectangle(brush, 10, 10, 100, 40);?

?

??? 設置背景顏色的方法是使用Component類（JPanel類的祖先）中的setBackground方法。事實上，如果要看到背景顏色，你應該先將JPanel設為不透明。默認情況下，JPanel是透明的。對于AsWing的組件，你可以在運行當中隨時改變其背景顏色。

var?panel:JPanel =?new?JPanel();
panel.setOpaque(true);
panel.setBackground(ASColor.BLACK);
contentPane.append(panel);

?

???? LookAndFeel中通常都定義了組件的一些列默認顏色，這里稱為系統顏色，可以通過UIManager.getColor(name)獲取指定名稱的顏色，比如UIManager.getColor("window")就會得到窗口背景的顏色，表1.6-2中是常用的系統顏色名稱表。

?

表1.6-2 系統顏色

?

activeCaption	標題的背景顏色
activeCaptionText	標題的文本顏色
activeCaptionBorder	標題的邊框顏色
inactiveCaption	非活動標題的背景顏色
inactiveCaptionText	非活動標題的文本顏色
inactiveCaptionBorder	非活動標題的邊框顏色
window	窗口的背景顏色
windowBorder	窗口的邊框顏色
windowText	窗口內文本的顏色
menu	菜單的背景顏色
menuText	菜單的文本顏色
text	文本的背景顏色
textText	文本的文本顏色
textHighlight	高亮文本的背景顏色
textHightliteText	高亮文本的文本顏色
control	空間的背景顏色
controlText	控件的文本顏色
controlLiHighlight	控件的輕高亮顏色
controlHighlight	控件的高亮顏色
controlShadow	控件的陰影顏色
controlDkShadow	控件的暗陰影顏色
scrollbar	滾動欄的背景顏色

?

API：org.aswing.ASColor

• ASColor (rgb:uint=0x000000, alpha:Number=1)

???????創建一個顏色對象。

???????參數：rgb，用RGB顏色空間表示的顏色值。

???????????????alpha，顏色的透明度（0.0-1.0）

?

• getASColor(r:uint, g:uint, b:uint, a:Number=1):ASColor

???????根據R、G、B的值獲取一個新的顏色對象。

???????參數：r? ??紅色值（0-255）

?????????????? g???綠色值（0-255）

?????????????? b???藍色值（0-255）

?????????????? a?? alpha，顏色的透明度（0.0-1.0）???????

?

• getRGBWith(rr:uint, gg:uint, bb:uint):uint

???????根據R、G、B獲取某一個顏色的顏色值

?

API:org.aswing.Component

• setBackground(c:ASColor):void

???????設置背景顏色。背景顏色只有在組件為不透明的時候才會被顯示。

???????參數：c???新的背景顏色。

?

• setOpaque(b:Boolean):void

???????設置背景是否透明。

???????參數：b? （true，false）。

???????????????????true表示不透明

???????????????????false表示透明

?

?

?

填充形狀

???

????你可以用一個顏色來填充閉合形狀（例如矩形或橢圓）的內部區域。只需用fill代替draw：

var?brush:IBrush =?new?SolidBrush(ASColor.RED);?// 創建一只紅色的純色刷子
g.fillRectangle(brush, 10, 10, 100, 100);?// 填充矩形

?

刷子對象

???

??? 你可以用刷子對象對形狀做各種填充。所有的刷子對象都實現IBrush接口。

?

??? AsWing提供了3種刷子，他們分別是純色刷子（SolidBrush）、過渡色刷子（GradientBrush）、位圖刷子（BitmapBrush），下面我們分別介紹這三種刷子。

?

??? 純色刷子，這是最常用的一種刷子，它用一種顏色來填充區域，如圖1.6-1所示，如下：

var?solidBrush:IBrush =?new?SolidBrush(ASColor.RED);
g2.fillRectangle(solidBrush, bounds.x+10, bounds.y+10, 100, 100);

（圖1.6-1）

?

?

??? 過度色刷子可以表現顏色過渡效果。創建過渡色刷子需要提供過渡類型、顏色漸變范圍和透明度范圍。過渡類型線性過渡（GradientBrush.LINEAR）和圓形過渡（GradientBrush.RADIAL）兩種。

?

??? 線性過渡要先設定一個顏色列表，這個列表當中的顏色是將要參與漸變的各種關鍵顏色，如下是三個顏色的漸變色列表：

var?colors:Array = [0x000000, 0xFF0000, 0x00FF00, 0x0000FF, 0x000000];?// 光譜黑-紅-綠-藍-黑，兩端的黑色表示不可見波段

???? 漸變色的透明度列表依次對應漸變色列表當中每一種關鍵顏色的透明度，在AS3.0當中，透明度不再用一個（0-100）的整數表示，而是改用一個（0-1）的小數表示，對于AS2程序員來說，這一點需要注意。如下：

var?alphas:Array = [0, 1, 1, 1, 0];?// 兩端的透明度為0，讓填充區自然溶于背景當中?

???? 比率列表當中的每一項表示對應的一種關鍵顏色的100%采樣值距離在填充框當中的位置比例。其中的每一個項是一個（0x00-0xFF）的數，填充的起點是0x00，填充的中止位置是0xFF。如下：

var?ratios:Array = [0x00, 0x3F, 0x7E, 0xBD, 0xFF];?//?這5個數對?（0-0xFF）區間4等分，它們分別是：?0 * 0xFF/4, 1 * 0xFF/4,?2 * 0xFF/4,?3 * 0xFF/4,?4 * 0xFF/4

???? 填充矩陣是一個矩陣（Matrix）對象。需要制定填充框的大小、填充的角度（默認為0度，即延x正方向從左到右填充）以及x、y方向的偏移量。一般來說，填充框的長和寬和要填充的圖形的長寬相同，填充框的x,y偏移量分別就是要填充的圖形的左上角定點的x,y坐標，如下：

var?matrix:Matrix =?new?Matrix();
matrix.createGradientBox(100, 100, 0, bounds.x+10, bounds.y+120);?// 填充框的大小為 100×100 像素，填充方向為水平從左向右，偏移量是繪圖區域的左邊緣向右10像素

???? 在顏色列表，透明度列表，比率列表以及填充矩陣都定義好之后，就可以開始填充了，如圖1.6-2，如下：

var?linear:IBrush =?new?GradientBrush(GradientBrush.LINEAR, colors, alphas, ratios, matrix);
g.fillRectangle(linear, bounds.x+10, bounds.y+120, 100, 100);

?

?（圖1.6-2）

?

?Bill，已經將你的思想重新編排寫進去了 -胡礦 07-8-8 下午5:02?

?

??? 圓形填充（RADIAL）又叫做放射狀填充，這種填充是從起點開始向周圍所有方向填充，可以看到一圈一圈的等色線。

?

??? 圓形填充的操作和線性填充一樣，只要在填充的時候將填充類型設為圓形填充（GradientBrush.RADIAL）即可，如圖1.6-3所示，如下：

var?linear:IBrush =?new?GradientBrush(GradientBrush.RADIAL, colors, alphas, ratios, matrix);
g.fillRectangle(linear, bounds.x+10, bounds.y+230, 100, 100);?

?

?（圖1.6-3）

?

??? 例1.6-1是完整的示例代碼，運行結果見圖1.6-3

例1.6-1

?

package
{
????import?flash.display.Sprite;
?
????import?org.aswing.ASColor;
????import?org.aswing.Component;
????import?org.aswing.Container;
????import?org.aswing.JFrame;
????import?org.aswing.graphics.Graphics2D;
????import?org.aswing.graphics.IBrush;
????import?org.aswing.graphics.SolidBrush;

????public?class?FillTest?extends?Sprite
????{
????????public?function?FillTest()
????????{????????????
????????????var?frame:JFrame =?new?JFrame(this);
????????????frame.setSizeWH(400, 370);
???
????????????var?c:Container = frame.getContentPane();
????????????c.setBackgroundDecorator(new?MyCanvas());

?

????????????frame.show();
????????}
??
????}
}
????import?org.aswing.GroundDecorator;
????import?flash.display.Shape;
????import?org.aswing.Component;
????import?org.aswing.graphics.Graphics2D;
????import?org.aswing.geom.IntRectangle;
????import?flash.display.DisplayObject;
????import?org.aswing.graphics.IBrush;
????import?org.aswing.graphics.SolidBrush;
????import?org.aswing.ASColor;
????import?org.aswing.graphics.GradientBrush;
?
????import?flash.geom.Matrix;
?

class?MyCanvas?implements?GroundDecorator {
?
????private?var?shape:Shape =?new?Shape();
?
????private?var?H_GAP:uint = 10;
????private?var?V_GAP:uint = 10;
?
????private?var?WIDTH:uint = 100;
????private?var?HEIGHT:uint = 100;
?
????public?function?updateDecorator(com:Component, g:Graphics2D, bounds:IntRectangle):void?{
????????var?g2:Graphics2D =?new?Graphics2D(this.shape.graphics);
????????g2.clear();
??
????????var?rectBounds:IntRectangle =?new?IntRectangle();
??
????????//fill solid rect
??
????????rectBounds.x = bounds.x + H_GAP;
????????rectBounds.y = bounds.y + V_GAP;
????????rectBounds.width = WIDTH;
????????rectBounds.height = HEIGHT;
??
????????var?solidBrush:IBrush =?new?SolidBrush(ASColor.RED);
????????g2.fillRectangle(solidBrush, rectBounds.x, rectBounds.y, rectBounds.width, rectBounds.height);
??
????????//fill liner grandient rect
??
????????rectBounds.y += HEIGHT; // move shape rect
????????rectBounds.y += V_GAP;
??
????????var?colors:Array = [0x000000, 0xFF0000, 0x00FF00, 0x0000FF, 0x000000];
????????var?alphas:Array = [0, 1, 1, 1, 0];
????????var?ratios:Array = [0x00, 0x3F, 0x7E, 0xBD, 0xFF];
????????var?matrix:Matrix =?new?Matrix();
??
????????matrix.createGradientBox(rectBounds.width, rectBounds.height, 0, rectBounds.x, rectBounds.y);
????????var?linear:IBrush =?new?GradientBrush(GradientBrush.LINEAR, colors, alphas, ratios, matrix);
??
????????g.fillRectangle(linear, rectBounds.x, rectBounds.y, rectBounds.width, rectBounds.height);
??
????????//fill radial grandient
??
????????rectBounds.y += HEIGHT; // move shape rect
????????rectBounds.y += V_GAP;
??
????????matrix.createGradientBox(rectBounds.width, rectBounds.height, 0, rectBounds.x, rectBounds.y);
????????var?radial:IBrush =?new?GradientBrush(GradientBrush.RADIAL, colors, alphas, ratios, matrix);
??
????????g.fillRectangle(radial, rectBounds.x, rectBounds.y, rectBounds.width, rectBounds.height);
????}
?
????public?function?getDisplay(c:Component):DisplayObject {
????????return?this.shape;
????}
}

????

??? 位圖刷子可以讓你用位圖圖像來做填充，如圖1.6-4：

var?brush:IBrush =?new?BitmapBrush(bm.bitmapData, null, false, false);?// bm是一個Bitmap實例
g.fillRectangle(brush, bounds.x, bounds.y, bounds.width, bounds.height);

?（圖1.6-4）

???

??? BitmapBrush構造函數有4個參數,形式為 BitmapBrush(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean =?true, smooth:Boolean =?false), 第一個參數bitmap即是要繪制的位圖圖像數據；第二個參數可以使繪制的圖像進行變形,比如縮放、旋轉、位移等；第三個參數指繪制的時候，如果繪制區域比圖像大，是否進行平鋪，在有些情況這個參數很有用，比如一個磚墻的背景，可以通過平鋪一個很小的磚塊圖像形成一面墻的效果；第四個參數指定是否進行平滑處理。這幾個參數它們的意義跟flash.display.Graphics.beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean =?true, smooth:Boolean =?false)中對應參數的意義一樣,可參閱Flash CS3或者FlexBuilder幫助文檔相關內容.

??? 例1.6-2是完整的示例代碼，窗口中放置了4個JPanel，他們用同一個位圖圖形，不同的參數進行繪制，用運行結果見圖1.6-5

（圖1.6-5）例1.6-2

?

package{

import?flash.display.Sprite;
import?org.aswing.*;
import?org.aswing.graphics.*;
import?flash.geom.Matrix;

public?class?FillTest2?extends?Sprite{
?? ?
?? ?public?function?FillTest2(){
?? ?????super();
?? ???? AsWingManager.initAsStandard(this);
??????? var frame:JFrame = new JFrame(this);
?????? ?
????????var?p1:JPanel =?new?JPanel();
??????? p1.setBackgroundDecorator(new?MyBitmapDecorator(null,?false,?false));
??????? var p2:JPanel =?new?JPanel();
??????? p2.setBackgroundDecorator(new?MyBitmapDecorator(null,?true,?false));
?????? ?
????????var?p3:JPanel =?new?JPanel();
????????var?matrix1:Matrix =?new?Matrix();
??????? matrix1.scale(3, 3);
??????? p3.setBackgroundDecorator(new?MyBitmapDecorator(matrix1,?false,?false));
?????? ?
????????var?p4:JPanel =?new?JPanel();
????????var?matrix2:Matrix =?new?Matrix();
??????? matrix2.rotate(Math.PI/4);
??????? p4.setBackgroundDecorator(new?MyBitmapDecorator(matrix2,?true,?true));
?????? ?
????????var?pane:Container =?new?JPanel(new?GridLayout(2, 2, 2, 2));
??????? pane.appendAll(p1, p2, p3, p4);
??????? frame.setContentPane(pane);
?????? ?
??????? frame.setSizeWH(500, 400);
??????? frame.show();
?? ?}
?? ?
}
}

import?org.aswing.*;
import?org.aswing.graphics.*;
import?org.aswing.geom.*;
import?flash.display.*;
import?flash.geom.Matrix;
?? ?
class?MyBitmapDecorator?implements?GroundDecorator{
?? ?
?? ?[Embed(source="img1.jpg")]
?? ?private?var?imgClass:Class;
?? ?private?var?matrix:Matrix;
?? ?private?var?repeat:Boolean;
?? ?private?var?smooth:Boolean;
?? ?
?? ?public?function?MyBitmapDecorator(matrix:Matrix = null, repeat:Boolean =?true, smooth:Boolean =?false){
?? ?????this.matrix = matrix;
?? ?????this.repeat = repeat;
?? ?????this.smooth = smooth;
?? ?}
?? ?
????public?function?updateDecorator(com:Component, g:Graphics2D, bounds:IntRectangle):void?{
?? ?????var?bm:Bitmap =?new?imgClass()?as?Bitmap;
?? ?????var?brush:IBrush =?new?BitmapBrush(bm.bitmapData, matrix, repeat, smooth);
?? ???? g.fillRectangle(brush, bounds.x, bounds.y, bounds.width, bounds.height);
??? }
?? ?
????public?function?getDisplay(c:Component):DisplayObject{
?? ?????return?null;
??? }
}

API:org.aswing.graphics.SolidBrush

• SolidBrush(color:ASColor)

???????創建一把純色刷子。

?

API:org.aswing.graphics.GradientBrush

• GradientBrush(fillType:String ,

???????????????????????????colors:Array,

???????????????????????????alphas:Array,

???????????????????????????ratios:Array,

???????????????????????????matrix:Matrix)?

???????創建一把過渡色填充刷子。

???????參數：

?????????????fillType，填充類型，有線性填充（GradientBrush.LINEAR）和放射填充（GradientBrush.RADIAL）

?????????????colors，參與過渡填充的關鍵顏色列表。顏色用一個（0x000000-0xFFFFFF）之間的整數表示。

?????????????alphas，參與過渡填充的關鍵顏色的透明度的列表。透明度用一個（0-1）的小數表示。

?????????????ratios，參與過渡填充的關鍵色的位置比例。位置比例是一個（0x00-0xFF）的小數，0x00表示在填充的起點位置，0xFF表示在填充的結束位置。位置比例是一個比例，不是絕的像素位置。

?????????????matrix，填充矩陣，一般通過 matrix.matrix.createGradientBox(width, height, angle, x_offset, y_offset)方法來創建。

?

?

API:flash.geom.Matrix

• createGradientBox(width, height, angle, x_offset, y_offset):void?

???????創建一個填充矩陣。

???????參數：

?????????????width，填充框的寬度，單位是像素。

?????????????height，填充框的高度，單位是像素。

?????????????angle，填充的角度，單位是弧度

?????????????x_offset，填充框左上角的x坐標

?????????????y_offset，填充框左上角的y坐標

轉載于:https://www.cnblogs.com/fxair/archive/2010/02/20/1669993.html

總結

以上是生活随笔為你收集整理的Aswing入门教程 1.6 颜色和填充的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。