AsWing入门教程 1.5 2D图形

AsWing入门教程 1.5 2D图形

 

 

作者：胡矿

 

 

著作权所有，请勿转载

 

 

www.flashseer.org 

 

Google Doc

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

 

 

 

    从ActionScript3.0发布开始，Flash也有了专门绘制基本图形的工具类Graphics，可以用它来绘制直线、矩形、椭圆等。但是这些绘制非常有限。

 

    Graphics2D类封装很多图形操作，用Graphics2D绘制图形很方便，例如图1.5-1的图形。

 

 （图1.5-1）

 

    如果你要得到一个Graphics2D对象，你只需要将一个普通的Graphics对象封装进去就行了，如：

 protected function paint(bounds:IntRectangle) :void {
     super.paint(bounds);
  
     var g2:Graphics2D = new Graphics2D(this.graphics);

     ......
 }  

 

    面板类（JPanel）是容器类（Container）的子类，它们从Component类继承了setBackgroundDecorator方法。setBackgroundDecorator方法允许用一个实现GroundDecorator接口的类作为JPanel的背景。JPanel默认的背景是透明的，就是它什么都不显示。我们可以通过扩展GroundDecorator类来改变JPanel的背景，对于图形编程我们推荐采用这种方式。

 

    背景装饰器接口（GroundDecorator）是装饰器接口（Decorator）的子类，从Decorator接口当中继承了getDisplay方法，并且GroundDecorator接口还声明了updateDecorator方法，所以实现GroundDecorator就需要实现这两个方法，如下：

 class MyBackground implements GroundDecorator {

 

    private var shape:Shape;

 

    public function MyBackground() {

          this.shape = new Shape();

    }
 
    public function updateDecorator(c:Component, g:Graphics2D, bounds:IntRectangle) : void{
         shape.graphics.clear();
         g = new Graphics2D(shape.graphics);    

 

         ......

   }
 
    public function getDisplay(c:Component) : DisplayObject{
        return this.shape;
    }
}

 

    你可以直接用updateDecorator方法的Graphics2D参数进行绘制，但是我们建议新建一个Shape对象并且在新建的Shape对象上进行绘制，AsWing将通过getDisplay方法获取这个Shape对象，并且把它放置到容器当中。

 

    扩展了GroundDecorator之后需要将扩展的对象作为JPanel的背景面板修饰器（BackgroundDecorator）。如下：

 var ground:GroundDecorator = ......

 panel.setBackgroundDecorator(ground);

    容器组件（Container）包含一个内容窗格和一个背景窗格，如图1.5-1所示。在上一节当中，我们直接在内容窗格当中绘制，但是由于内容窗格同时也会放置其它组件，所以我们推荐在背景窗格上绘制。

 

（图1.5-1）

 

    用Graphics2D绘制形状是很容易的。在绘制之前需要先创建一只笔（Pen）或者一把刷子（Brush），笔用来绘制线条，刷子则可以用来填充颜色。

 

    构造一只笔（Pen）需要提供颜色和线条的粗细，如下代码定义了一支颜色为黑色，线条为2像素粗的笔：

 var pen:Pen = new Pen(ASColor.BLACK, 2);

 

 

 

---

 

笔记：

在AsWing当中，颜色被封装到ASColor对象当中，ASColor定义了一些常用的颜色的颜色对象，比如ASColor.WHITE、ASColor.BLACK，如果需要定义特定的颜色，可以通过静态方法ASColor.getASColor来获取所需颜色的颜色对象，比如要得到红色（Red=0xFF，Green=0x0，Blue=0x0），可以用如下代码：

var red:ASColor = ASColor.getASColor(0xFF, 0x0, 0x0); 

 

关于颜色的操作，在下一节还会继续介绍。

 

---

 

 

 

    若要绘制一条直线，需要提供两个端点的坐标(x1,y1)和(x2,y2)，如下：

 g.drawLine(pen, x1, y1, x2, y2);

 

    若要绘制一个矩形，需要提供左上角断点的坐标，以及矩形的宽度和高度，语法如下：

 g.drawRectangle(pen, x, y, width, height);

 

    对于椭圆的描述是通过它的外切矩形。所以若要绘制一个椭圆，需要提供其外切矩形左上角顶点的位置和这个外接矩形的长度、宽度，语法如下：

g.drawEllipse(pen, x, y, width, height);

 

     绘制圆形的时候，需要提供的是圆心的坐标和圆形的半径，如下：

g.drawCircle(pen, x, y, radius); 

 

     例1-4中的程序绘制了：

• 一个矩形；
• 该矩形的内接椭圆；
• 该矩形的一条对角线；
• 一个和该矩形同心的圆。
• 所有图形都绘制在框架的中央，如果框架改变大小，图形也会随之改变

 

例1-4 DrawTest.as

 

package
{
    import flash.display.Sprite;
    
    import org.aswing.AsWingManager;
    import org.aswing.Container;
    import org.aswing.GroundDecorator;
    import org.aswing.JFrame;
    import org.aswing.JPanel;

    public class DrawTest extends Sprite
    {
        public function DrawTest() {
            
            AsWingManager.initAsStandard(this);
            
            var frame:JFrame = new JFrame();
            frame.setTitle("Draw test");
            frame.setSizeWH(DEFAULT_WIDTH, DEFAULT_HEIGHT);
            
            var panel:JPanel = new JPanel();
            var ground:GroundDecorator = new MyGroundDecorator();
            panel.setBackgroundDecorator(ground);
            
            var contentPane:Container = frame.getContentPane();
            contentPane.append(panel);
            
            frame.show();
        }
        
        public static const DEFAULT_WIDTH:uint = 400;
        public static const DEFAULT_HEIGHT:uint = 300;
    }
}

 

import flash.display.Shape;
import flash.display.DisplayObject;
    
import org.aswing.GroundDecorator;
import org.aswing.Component;
import org.aswing.graphics.Graphics2D;
import org.aswing.geom.IntRectangle;
import org.aswing.graphics.Pen;
import org.aswing.ASColor;
   

class MyGroundDecorator implements GroundDecorator {
    
    private var shape:Shape;
    
    public function MyGroundDecorator() {
        this.shape = new Shape();
    }
    
    public function updateDecorator(com:Component, g:Graphics2D, bounds:IntRectangle) : void {
        g = new Graphics2D(shape.graphics);

 

        //clear before draw
        
        g.clear();
        
        //create a pen for drawing
        
        var pen:Pen = new Pen(ASColor.BLACK);
        
        //draw line
        
        var x1:uint = bounds.x+100;
        var y1:uint = bounds.y+50;
        
        var x2:uint = bounds.x + bounds.width - 100;
        var y2:uint = bounds.y + bounds.height - 50;
        
        g.drawLine(pen, x1, y1, x2, y2);
        
        //draw rectangle 1
        
        var uint = x2 - x1;
        var height:uint = y2 - y1;
        
        g.drawRectangle(pen, x1, y1, width, height);
        
        //draw ellipse
        
        g.drawEllipse(pen, x1, y1, width, height);
        
        //draw circle
        
        var x:uint = bounds.x + Math.round(bounds.width/2);
        var y:uint = bounds.y + Math.round(bounds.height/2);
        var radius:uint = Math.round(Math.min(bounds.width, bounds.height)/2);
        
        g.drawCircle(pen, x, y, radius);
    }
    
    public function getDisplay(c:Component) : DisplayObject {
        return this.shape;
    }
}

 

 

API：org.aswing.GroundDecorator

• updateDecorator(c:Component, g:Graphics2D, bounds:IntRectangle) : void

更新装饰器的显示，这个方法将会在显示区域发上改变的适合哦自动调用，比如框架的尺寸发生改变的时候，还有第一次显示的时候。

参数c是被装饰的组件的引用，也就是这个装饰器的所有者。

g是c上面的2D图形对象（Graphics2D），通过g可以直接在c上绘制，不过我们推荐还是用自己创建的DisplayObject来绘制而不是直接用所有者组件的图形对象。

bounds是绘制的区域信息。你应该只在这个区域当中绘制。这个区域的大小不是固定的，在每次调用这个方法的时候，AsWing都会根据当前的显示布局重新调整bounds的值，所以你的程序应该根据bounds来设置大小

• getDisplay(c:Component) : DisplayObject

获取DisplayObject类型的对象，如果你在绘制当中使用了自己新建的DisplayObject类型的对象，那么你应该在这里返回你的对象。

 

API：org.aswing.Container

• setBackgroundDecorator(bg:GroundDecorator):void

设置背景装饰器，这个绘制发生在Container的背景层上。

 

API：org.aswing.graphics.Pen

• Pen(color:ASColor,thickness:uint)

构造一支画笔。画笔是绘制线条的工具。

 

API：org.aswing.ASColor

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

构造一个颜色对象。参数rgb是一个6位的16进制数，分别代表了Red、Green、Blue三个通道的数值。参数alpha是一个0到1之间的小数，控制颜色的透明度。0为完全透明，1为完全不透明。

 

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

利用三个通道的数值和透明多获取一个颜色对象

 

• getASColorWithHLS(h:Number, l:Number, s:Number, alpha:Number=1):ASColor

 通过HLS的三个通道和透明度获取一个颜色对象

 

API：org.aswing.graphics.Graphics2D

• clear():void

清除已经绘制成的图像内容。

 

• drawCircle(pen:IPen, centerX:Number, centerY:Number, radius:Number):void

绘制一个圆形。

 

• drawEllipse(pen:IPen, x:Number, y:Number, Number, height:Number):void

绘制一个椭圆，椭圆的外切矩形的左上角定点位于(x,y)，外切矩形的宽度为width，外切矩形的高度为height

 

• drawLine(p:IPen, x1:Number, y1:Number, x2:Number, y2:Number):void

 绘制一条直线段，(x1,y1)和(x2,y2)分别是线段的两个端点

 

• drawPolygon(pen:Pen, points:Array):void

绘制一个多边形。points为顶点数组，数组当中的对象为的顶点对象，结构为{x:x0, y:y0}。多边形是封口的，最后一个定点和第一个定点之间会自动绘制连线。

 

• drawPolyline(p:IPen, points:Array):void

绘制一个不封口的多边形边。points为顶点数组，和drawPolygon一样，区别只是DrawPolyline不会自动封口。

 

• drawRectangle(pen:IPen, x:Number, y:Number, Number, height:Number):void

绘制一个矩形。矩形的左上角定点位于(x,y)，宽度为width，高度为height

 

• drawRoundRect(pen:IPen, x:Number, y:Number, Number, height:Number, radius:Number):void

绘制一个圆角矩形。矩形的外切矩形左上角顶点位于(x,y)，宽度为width，高度为height。矩形的圆角的曲率半径为radius。圆角和边相切。