您的位置:首页 > 其它

flex_(10)显示对象的拖动;

2012-06-28 17:53 246 查看
=>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, 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, this.lineColor, 1.0);

this.graphics.beginFill(this.fillColor, 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, lColor:Number=0x000000, fColor:Number=0xCCEECC)

{

super(size, lColor, fColor);

this.shapeType = "Square";

this.geometricShape = new Square(size);

drawShape();

}

/**

* 绘制图形

*/

public override function drawShape():void

{

this.graphics.clear();

this.graphics.lineStyle(1.0, this.lineColor, 1.0);

this.graphics.beginFill(this.fillColor, 1.0);

this.graphics.drawRect(0, 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, lColor:Number=0x000000, fColor:Number=0xCCCCEE)

{

super(size, lColor, fColor);

/*指定形状类型*/

this.shapeType = "Triangle";

this.geometricShape = new EquilateralTriangle(size);

/*绘制图形*/

drawShape();

}

/**

* 绘制图形:由于出于简单显示,故绘制出来的三角形不是真真正正的等边三角形,而是类似。

*/

public override function drawShape():void

{

this.graphics.clear();

this.graphics.lineStyle(1.0, this.lineColor, 1.0);

this.graphics.beginFill(this.fillColor, 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, lColor:Number=0x000000, 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;

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐