Aswing入门教程 1.6 颜色和填充

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坐标