=>SpriteArrangerApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
? xmlns:s="library://ns.adobe.com/flex/spark"
? xmlns:mx="library://ns.adobe.com/flex/mx"
? xmlns:spriteArranger="com.cen.programmingas3.spriteArranger.*"
? minWidth="955" minHeight="600" creationComplete="creationCompleteHandler(event)">
<!--显示对象示例-->
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
<![CDATA[
import com.cen.programmingas3.spriteArranger.GeometricSprite;
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
canvas.initCanvas(0xFFFFFF,0xCCCCCC);
}
/**
* 描述信息
*/
public function describeShapes():void
{
if(GeometricSprite.selectedSprite != null) {
this.selectedSpriteTxt.text = GeometricSprite.selectedSprite.toString();
}
this.outputTxt.text = this.canvas.describeChildren();
}
/**
* 添加几何图形
*/
public function addShape():void
{
var shapeName:String = shapeNameCbo.selectedItem;
trace("=>shapeName_"+shapeName);
this.canvas.addShape(shapeName,shapeSizeNs.value);
/*显示描述信息*/
describeShapes();
}
/**
* 移动到最后
*/
public function moveToBack():void
{
if(GeometricSprite.selectedSprite != null) {
this.canvas.moveToBack(GeometricSprite.selectedSprite);
this.outputTxt.text = this.canvas.describeChildren();
}
}
/**
* 往下移一层
*/
public function moveDown():void
{
if(GeometricSprite.selectedSprite != null) {
this.canvas.moveDown(GeometricSprite.selectedSprite);
this.outputTxt.text = this.canvas.describeChildren();
}
}
/**
* 往上移一层
*/
public function moveUp():void
{
if(GeometricSprite.selectedSprite != null) {
this.canvas.moveUp(GeometricSprite.selectedSprite);
this.outputTxt.text = this.canvas.describeChildren();
}
}
/**
* 移动到最上方
*/
public function moveToFront():void
{
if(GeometricSprite.selectedSprite != null) {
this.canvas.moveToFront(GeometricSprite.selectedSprite);
this.outputTxt.text = this.canvas.describeChildren();
}
}
]]>
</fx:Script>
<s:Panel width="750" height="530" title="添加、管理图形">
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingLeft="3" paddingTop="3" paddingRight="3" paddingBottom="3">
<mx:ControlBar width="100%" borderStyle="outset">
<s:Label text="添加图形："/>
<s:ComboBox id="shapeNameCbo">
<s:dataProvider>
<s:ArrayList>
<fx:String>Circle</fx:String>
<fx:String>Triangle</fx:String>
<fx:String>Square</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBox>
<s:Label text="大小/像素："/>
<s:NumericStepper id="shapeSizeNs" maximum="100" minimum="10" stepSize="10"
?valid="50"/>
<s:Button id="addBtn" label="添加" click="{addShape()}"/>
</mx:ControlBar>
<s:VGroup width="100%" height="100%" paddingBottom="10" paddingLeft="10"
?paddingRight="10" paddingTop="10">
<s:HGroup width="100%">
<s:Label width="100%" text="绘图区域："/>
<s:Spacer width="100%"/>
<s:Button id="moveToBackBtn" label="移到最后" click="{moveToBack()}"/>
<s:Button id="moveDownBtn" width="60" label="往下移" click="{moveDown()}"/>
<s:Button id="moveUpBtn" width="60" label="往上移" click="{moveUp()}"/>
<s:Button id="moveToFrontBtn" label="移到最前" click="{moveToFront()}"/>
</s:HGroup>
<!--画布-->
<spriteArranger:DrawingCanvas id="canvas" width="500" height="200"/>
<s:Label width="100%" text="自显示对象："/>
<s:TextArea id="outputTxt" width="100%" height="100" editable="false"/>
<s:HGroup width="100%">
<s:Label text="所选择显示对象："/>
<s:Label id="selectedSpriteTxt" text="无；"/>
</s:HGroup>
</s:VGroup>
</s:VGroup>
</s:Scroller>
</s:Panel>
</s:Application>
=>DrawingCanvas.as
package com.cen.programmingas3.spriteArranger
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import mx.core.UIComponent;
/**
* 画布类
* @author cen
*/
public class DrawingCanvas extends UIComponent
{
/**
* 属性
*/
/*界限*/
public var bounds:Rectangle;
/*线条颜色*/
public var lineColor:Number;
/*填充颜色*/
public var fillColor:Number;
/**
* 构造函数
* @param w
* @param h
* @param fillColor
* @param lineColor
*/
public function DrawingCanvas(w:Number=500,h:Number=200,fillColor:Number=0xFFFFFF,lineColor:Number=0x000000)
{
super();
this.bounds=new Rectangle(0,w,h);
/*监听画布的鼠标松开事件，调用其所选择的子对象的鼠标松开处理函数以停止拖动*/
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
/**
* 松开鼠标
* Traps(诱捕) all mouseUp events and sends them to the selected shape.
* Useful when you release(释放) the mouse while the selected shape is
* underneath(在...下面) another one (which prevents the selected shape from
* receiving the mouseUp event).
* @param event
*
*/
public function onMouseUp(event:MouseEvent):void
{
var selectedSprite:GeometricSprite=GeometricSprite.selectedSprite;
if (selectedSprite != null && selectedSprite.isSelected())
{
selectedSprite.onMouseUp(event);
}
}
/**
* 初始化函数(手动调用)
* @param fillColor
* @param lineColor
*/
public function initCanvas(fillColor:Number=0xFFFFFF,lineColor:Number=0x000000):void
{
this.lineColor=lineColor;
this.fillColor=fillColor;
this.width=500;
this.height=200;
drawBounds();
}
/**
* 绘制边界
*/
public function drawBounds():void
{
this.graphics.clear();
this.graphics.lineStyle(1.0,this.lineColor,1.0);
this.graphics.beginFill(this.fillColor,1.0);
this.graphics.drawRect(bounds.left - 1,bounds.top - 1,bounds.width + 2,bounds.height + 2);
this.graphics.endFill();
}
/**
* 几何图形添加方法
* @param shapeName
* @param len
*/
public function addShape(shapeName:String,len:Number):void
{
var newShape:GeometricSprite;
switch (shapeName)
{
case "Triangle":
{
newShape=new TriangleSprite(len);
break;
}
case "Square":
{
newShape=new SquareSprite(len);
break;
}
case "Circle":
{
newShape=new CircleSprite(len);
break;
}
}
newShape.alpha=0.8;
this.addChild(newShape);
}
/**
*子对象信息
* @return
*
*/
public function describeChildren():String
{
var desc:String="";
var child:DisplayObject;
for (var i:int=0; i < this.numChildren; i++)
{
child=this.getChildAt(i);
desc+=i + "：" + child + "n";// child会调用自身toString()方法输出；
}
return desc;
}
/**
* 使显示对象移动到最后一层
* @param shape
*/
public function moveToBack(shape:GeometricSprite):void
{
var index:int=this.getChildIndex(shape);
if (index > 0)
{
this.setChildIndex(shape,0);
}
}
/**
* 使显示对象往下移动一层
* @param shape
*
*/
public function moveDown(shape:GeometricSprite):void
{
var index:int=this.getChildIndex(shape);
if (index > 0)
{
this.setChildIndex(shape,index - 1);
}
}
/**
* 使显示对象移动到最上层
* @param shape
*
*/
public function moveToFront(shape:GeometricSprite):void
{
var index:int=this.getChildIndex(shape);
if (index != -1 && index < (this.numChildren - 1))
{
this.setChildIndex(shape,this.numChildren - 1);
}
}
/**
* 使显示对象往上移动一层
* @param shape
*/
public function moveUp(shape:GeometricSprite):void
{
var index:int=this.getChildIndex(shape);
if (index != -1 && index < (this.numChildren - 1))
{
this.setChildIndex(shape,index + 1);
}
}
}
}
=>CircleSprite.as
package com.cen.programmingas3.spriteArranger
{
/**
* 圆绘制类
* @author cen
*/
public class CircleSprite extends GeometricSprite
{
/**
* 构造函数?
* @param size
* @param lColor
* @param fColor
*?
*/
public function CircleSprite(diam:Number=100,lColor:Number=0x000000,fColor:Number=0xEECCCC)
{
super(diam,lColor,fColor);
this.shapeType = "Circle";
this.geometricShape = new Circle(diam);
drawShape();
}
/**
* 绘制图形
*/
public override function drawShape():void
{
this.graphics.clear();
this.graphics.lineStyle(1.0,1.0);
var radius:Number = this.size / 2;
this.graphics.drawCircle(radius,radius,radius);
this.graphics.endFill();
}
}
}
=>SquareSprite.as
package com.cen.programmingas3.spriteArranger
{
/**
* 正方形绘制类
* @author cen
*/
public class SquareSprite extends GeometricSprite
{
/**
*构造函数?
* @param size
* @param lColor
* @param fColor
*?
*/
public function SquareSprite(size:Number=100,fColor:Number=0xCCEECC)
{
super(size,fColor);
this.shapeType = "Square";
this.geometricShape = new Square(size);
drawShape();
}
/**
* 绘制图形
*/
public override function drawShape():void
{
this.graphics.clear();
this.graphics.lineStyle(1.0,1.0);
this.graphics.drawRect(0,this.size,this.size);
this.graphics.endFill();
}
}
}
=>TriangleSprite.as
package com.cen.programmingas3.spriteArranger
{
/**
* 等边三角形绘制
* @author cen
*/
public class TriangleSprite extends GeometricSprite
{
/**
* 构造函数
* @param size
* @param lColor
* @param fColor
*/
public function TriangleSprite(size:Number=100,fColor:Number=0xCCCCEE)
{
super(size,fColor);
/*指定形状类型*/
this.shapeType = "Triangle";
this.geometricShape = new EquilateralTriangle(size);
/*绘制图形*/
drawShape();
}
/**
* 绘制图形：由于出于简单显示，故绘制出来的三角形不是真真正正的等边三角形，而是类似。
*/
public override function drawShape():void
{
this.graphics.clear();
this.graphics.lineStyle(1.0,1.0);
this.graphics.moveTo(0,this.size);
this.graphics.lineTo((this.size/2),0);
this.graphics.lineTo(this.size,this.size);
this.graphics.lineTo(0,this.size);
this.graphics.endFill();
}
}
}
=>GeometricSprite.as
package com.cen.programmingas3.spriteArranger
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
/**
* 几何图形基类_用于定义(绘制)屏幕形状。CircleSprite、SquareSprite 和 TriangleSprite 都扩展此类
* @author cen
*/
public class GeometricSprite extends Sprite
{
/**
* 属性
*/
/*边长*/
public var size:Number;
/*线条颜色*/
public var lineColor:Number=0x000000;
/*填充颜色*/
public var fillColor:Number=0xDDDDEE;
/*图形形状类型*/
public var shapeType:String="GeometricSprite";
/**
* 存储虚拟图形对象，即没有绘制出来，但拥有图形的面积、周长等属性；*/
public var geometricShape:IGeometricShape;
/**
* 所选择的图形
* 静态变量：可以在不用实例化对象的基础上直接引用；
* Keeps track of(跟踪) the currently selected shape.
* This is a static property,so there can only be one GeometricSprite
* selected at any given time.*/
public static var selectedSprite:GeometricSprite;
/**
* 所选择图形边框
* Holds a border rectangle that is shown when this GeometricSprite instance is selected.*/
public var selectionIndicator:Shape;
/**
* 构造函数
* @param size
* @param lColor
* @param fColor
*/
public function GeometricSprite(size:Number=100,fColor:Number=0xDDDDEE)
{
this.size=size;
this.lineColor=lColor;
this.fillColor=fColor;
/*监听鼠标按下事件*/
this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
}
/**
* 绘制图形：用于子类覆盖扩展，以便绘制出需要的图形；
*/
public function drawShape():void
{
// to be overridden in subclasses;
}
/**
* 隐藏边框
*/
private function hideSelected():void
{
if (this.selectionIndicator != null)
{
this.selectionIndicator.visible=false;
}
}
/**
* 图形选择效果
*/
private function showSelected():void
{
if (this.selectionIndicator == null)
{
/**
* draws a red rectangle(矩形) around the selected shape;*/
this.selectionIndicator=new Shape();
this.selectionIndicator.graphics.lineStyle(1.0,0xFF0000,1.0);
this.selectionIndicator.graphics.drawRect(-1,-1,this.size + 1,this.size + 1);
this.addChild(this.selectionIndicator);
}
else
{
this.selectionIndicator.visible=true;
}
if (GeometricSprite.selectedSprite != this)
{
if (GeometricSprite.selectedSprite != null)
{
/*隐藏原先图形的边框*/
selectedSprite.hideSelected();
}
GeometricSprite.selectedSprite=this;
}
}
/**
* 按下鼠标处理函数
* @param event
*/
private function onMouseDown(event:MouseEvent):void
{
/*显示选择边框*/
this.showSelected();
/**
* limits dragging to the area inside the canvas(限制不能拖出画布外边)*/
/*矩形界限_获取跟父容器一样大小的矩形*/
var boundsRect:Rectangle=this.parent.getRect(this.parent);
boundsRect.width-=this.size;// 确保不超出父容器边界；
boundsRect.height-=this.size;
this.startDrag(false,boundsRect);
}
/**
* 松开鼠标处理
* 特别说明：通过父容器的鼠标up事件来调用其子类的鼠标up事件处理函数；
* @param event
*/
public function onMouseUp(event:MouseEvent):void
{
this.stopDrag();
}
/**
* 是否选择
* Returns true if this shape's selection rectangle is currently showing.
* @return
*/
public function isSelected():Boolean
{
return !(this.selectionIndicator == null || this.selectionIndicator.visible == false);
}
/**
*覆盖toString()方法，以提供更确切的信息?
* @return?
*/
public override function toString():String
{
return this.shapeType + " of size " + this.size + " at (" + this.x + "," + this.y + ");";
}
}
}
=>Circle.as
package com.cen.programmingas3.spriteArranger
{
/**
* 虚拟圆
* @author cen
* 2012-06-28
*/
public class Circle implements IGeometricShape
{
/**
* 属性
**/
/*直径*/
public var diameter:Number;
/**
* 构造函数
* @param diam
*/
public function Circle(diam:Number = 100):void
{
this.diameter = diam;
}
/**
* 面积
* About_the formula(公式) is Pi * radius * radius;
* @return?
*/
public function getArea():Number
{
var radius:Number = diameter/2;
return Math.PI * radius * radius;
}
/**
* 周长
* About_the formula is Pi * diameter;
* @return?
*/
public function getCircumference():Number{
return Math.PI * diameter;
}
/**
* 描述信息
* @return?
*/
public function describe():String
{
var desc:String = "此为圆形；n";
desc += "她的直径为"+diameter+"像素；n";
desc += "她的面积是"+this.getArea()+"；n";
desc += "她的周长是"+this.getCircumference()+"；n";
return desc;
}
}
}
=>EquilateralTriangle.as
package com.cen.programmingas3.spriteArranger
{
/**
* 虚拟等边三角形
* @author cen_2012-06-28
*/
public class EquilateralTriangle extends RegularPolygon
{
/**
* 属性_Inherits the <numSides> and <sideLength> properties from RegularPolygon;*/
/**
* 构造函数
* @param len
*/
public function EquilateralTriangle(len:Number=100):void
{
super(len,3);
}
/**
* 面积_底乘以高除以2；
* About_the formula(公式) is ((sideLength squared) * (square root of 3)) / 4;
* @return
*/
public override function getArea():Number
{
return ((this.sideLength * this.sideLength) * Math.sqrt(3)) / 4;
}
/**
* 描述信息
* @return?
*/
public override function describe():String
{
var desc:String = "此为三角形图形；n";
desc += super.describe();
return desc;
}
}
}
=>Square.as
package com.cen.programmingas3.spriteArranger
{
/**
* 虚拟正边形类_继承于等边几何形状类；
* cen_2012-06-28
*/
public class Square extends RegularPolygon
{
/**
* 属性_Inherits the <numSides> and <sideLength> properties from RegularPolygon*/
/**
* 构造函数
* @param len
*/
public function Square(len:Number=100)
{
super(len,4);
}
/**
* 周长_Inherits the getPerimeter() method from RegularPolygon*/
/**
* 内角和_Inherits the getSumOfAngles() method from RegularPolygon;*/
/**
* 覆盖获取面积基类方法
* @return
*/
public override function getArea():Number
{
return (this.sideLength * this.sideLength)
}
/**
* 描述信息
* @return?
*/
public override function describe():String
{
var desc:String = "此为正方形形状；n"
desc += super.describe();
return desc;
}
}
}
=>RegularPolygon.as
package com.cen.programmingas3.spriteArranger
{
/**
* 等边虚拟几何形状类：几何形状的边长相等，且这些边围绕形状中心对称分布，但没有绘制出相应图形。
* About_A regular polygon(多边形) is equilateral(等边)(all sides are the same length)
* and equiangular(等角)(all interior(内) angles are the same).
* cen_2012-06-28
*/
public class RegularPolygon implements IPolygon
{
/**
* 属性
*/
/*几何边数*/
public var numSides:Number;
/*边长*/
public var sideLength:Number;
/**
* 构造函数：默认三条边，边长为100；
*/
public function RegularPolygon(len:Number=100,sides:Number=3):void
{
this.sideLength=len;
this.numSides=sides;
}
/**
* 接口方法：获取周长；
*/
public function getPerimeter():Number
{
return sideLength * numSides;
}
/**
* 接口方法：获取角度总和；
* @return
*/
public function getSumOfAngles():Number
{
if (numSides >= 3)
{
return ((numSides - 2) * 180);
}
else
{
return 0;
}
}
/**
* 接口方法：获取几何面积；
* 特别说明：此方法供子类覆盖扩展；
*/
public function getArea():Number
{
return 0;
}
/**
* 接口方法；获取描述信息；
* @return
*/
public function describe():String
{
var desc:String="每边边长为" + sideLength + "像素；n";
desc+="她的面积为" + getArea() + "平方像素；n";
desc+="她的周长为" + getPerimeter() + "像素；n";
desc+="她的内角和为" + getSumOfAngles() + "度；n";
return desc;
}
}
}
=>GeometricShapeFactory.as
package com.cen.programmingas3.spriteArranger
{
/**
* 几何形状工厂类：包含“工厂方法”，用于创建给定形状类型以及尺寸的形状。
* cen_2012-06-28
* 何为工厂类？工厂类简而言之，就是通过给定类别以及必要属性来进行实例化类并返回；
*/
public class GeometricShapeFactory
{
/**
* 创建形状工厂方法
* @param shapeName
* @param len
* @return
*/
public static function createShape(shapeName:String,len:Number):IGeometricShape
{
switch (shapeName)
{
case "Triangle":
{
return new EquilateralTriangle(len); // 等边三角形；
break;
}
case "Square":
{
return new Square(len); // 正方形；
break;
}
case "Circle":
{
return new Circle(len); // 圆形；
break;
}
default:
{
return null;
break;
}
}
}
}
}
=>IPolygon.as
package com.cen.programmingas3.spriteArranger
{
/**
* 多边形接口类：由具有多条边的几何形状类实现的方法。
* cen_2012-06-28
*/
public interface IPolygon extends IGeometricShape
{
/**
* 获取周长
* @return
*/
function getPerimeter():Number;
/**
* 获取角度总和
* @return
*/
function getSumOfAngles():Number;
}
}
=>IGeometricShape.as
package com.cen.programmingas3.spriteArranger { /** * 接口：定义由几何形状类实现的方法; * 何为接口？接口就是一系列方法的定义，规范扩展类的方法； * cen_2012-06-28 */ public interface IGeometricShape { /** * 获取几何面积 * @return */ function getArea():Number; /** * 获取描述信息 * @return */ function describe():String; } }
