AsWing入门教程 1.5 2D图形
2010-02-20 23:28
295 查看
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对象封装进去就行了，如：
面板类（JPanel）是容器类（Container）的子类，它们从Component类继承了setBackgroundDecorator方法。setBackgroundDecorator方法允许用一个实现GroundDecorator接口的类作为JPanel的背景。JPanel默认的背景是透明的，就是它什么都不显示。我们可以通过扩展GroundDecorator类来改变JPanel的背景，对于图形编程我们推荐采用这种方式。
背景装饰器接口（GroundDecorator）是装饰器接口（Decorator）的子类，从Decorator接口当中继承了getDisplay方法，并且GroundDecorator接口还声明了updateDecorator方法，所以实现GroundDecorator就需要实现这两个方法，如下：
你可以直接用updateDecorator方法的Graphics2D参数进行绘制，但是我们建议新建一个Shape对象并且在新建的Shape对象上进行绘制，AsWing将通过getDisplay方法获取这个Shape对象，并且把它放置到容器当中。
扩展了GroundDecorator之后需要将扩展的对象作为JPanel的背景面板修饰器（BackgroundDecorator）。如下：
（图1.5-1）
用Graphics2D绘制形状是很容易的。在绘制之前需要先创建一只笔（Pen）或者一把刷子（Brush），笔用来绘制线条，刷子则可以用来填充颜色。
构造一只笔（Pen）需要提供颜色和线条的粗细，如下代码定义了一支颜色为黑色，线条为2像素粗的笔：
笔记：
在AsWing当中，颜色被封装到ASColor对象当中，ASColor定义了一些常用的颜色的颜色对象，比如ASColor.WHITE、ASColor.BLACK，如果需要定义特定的颜色，可以通过静态方法ASColor.getASColor来获取所需颜色的颜色对象，比如要得到红色（Red=0xFF，Green=0x0，Blue=0x0），可以用如下代码：
若要绘制一条直线，需要提供两个端点的坐标(x1,y1)和(x2,y2)，如下：
若要绘制一个矩形，需要提供左上角断点的坐标，以及矩形的宽度和高度，语法如下：
对于椭圆的描述是通过它的外切矩形。所以若要绘制一个椭圆，需要提供其外切矩形左上角顶点的位置和这个外接矩形的长度、宽度，语法如下：
绘制圆形的时候，需要提供的是圆心的坐标和圆形的半径，如下：
例1-4中的程序绘制了：
一个矩形；
该矩形的内接椭圆；
该矩形的一条对角线；
一个和该矩形同心的圆。
所有图形都绘制在框架的中央，如果框架改变大小，图形也会随之改变
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。圆角和边相切。
作者：胡矿
著作权所有，请勿转载
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);
......
}
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;
}
}
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所示。在上一节当中，我们直接在内容窗格当中绘制，但是由于内容窗格同时也会放置其它组件，所以我们推荐在背景窗格上绘制。panel.setBackgroundDecorator(ground);
（图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;
}
}
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。圆角和边相切。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [Qt教程] 第19篇 2D绘图（九）图形视图框架（上）
- J2ME移动2D图形快速入门
- Direct2D教程（三）简单几何图形
- HTML5之SVG 2D入门1―SVG(可缩放矢量图形)概述
- SVG 2D入门2 - 图形绘制
- 幻世（OurDream）2D图形引擎使用教程14——GUI图形用户界面系统（2）
- github入门到精通(命令和图形教程)
- 幻世（OurDream）2D图形引擎使用教程8——处理操作输入（2）
- 幻世（OurDream）2D图形引擎使用教程8——处理操作输入（2）
- 幻世（OurDream）2D图形引擎教程汇总[2014年3月12日提供教程打包下载链接]
- Word2003入门动画教程74：在Word中插入自选图形
- HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
- iOS 图形处理 Core Graphics Quartz2D 教程
- 使用HTML5进行SVG矢量图形绘制的入门教程
- 幻世（OurDream）2D图形引擎使用教程5——绘制文字
- Word入门动画教程82：图形对象的对齐与分布
- [Qt教程] 第20篇 2D绘图（十）图形视图框架（下）
- HTML5之SVG 2D入门2―图形绘制(基本形状)介绍及使用
- Unity2D游戏入门教程(一)宝石迷阵(6)宝石下落
- Unity 2D入门基础教程