说明: 写道
说明:此文转自大漠飞鸿的文章
http://hi.baidu.com/lozu/blog/item/4453c3b13c36035e092302d8.html
http://hi.baidu.com/lozu/blog/item/4453c3b13c36035e092302d8.html
AsWing入门教程 1.5 2D图形2009-10-09 22:02从ActionSacript3.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 width: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, width: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, width:Number, height:Number):void
绘制一个矩形。矩形的左上角定点位于(x,y),宽度为width,高度为height
drawRoundRect(pen:IPen, x:Number, y:Number, width:Number, height:Number, radius:Number):void
绘制一个圆角矩形。矩形的外切矩形左上角顶点位于(x,y),宽度为width,高度为height。矩形的圆角的曲率半径为radius。圆角和边相切。