您的位置:首页 > 移动开发

回答带箭头移动绘制矩形,小议AS3.0面向对像

2009-12-02 13:43 197 查看
根据需求我将功能分为三块

 1:线条绘制对象(Line类)   

   
package Spring
{
import flash.geom.Point;
import mx.core.UIComponent;
public class Line extends UIComponent
{
public var uAlpha:Number = 1;
public var uColor:uint = 0xffffff;
public var uWidth:Number = 1.8;
//初始化参数默认值
public function Line(uA:Number=1,uC:uint=0xffffff,uW:Number = 2.0)
{
this.uAlpha = uA;
this.uColor = uC;
this.uWidth = uW;
}

//初始化绘制线条
public function drawLine(pointB:Point,pointE:Point):void
{
graphics.clear();
graphics.lineStyle(uWidth,uColor,uAlpha);
graphics.moveTo(pointB.x,pointB.y);
graphics.lineTo(pointE.x,pointE.y);
}
//追加线条
public function drawLines(lineToX:Number,lineToY:Number):void
{
graphics.lineStyle(uWidth,uColor,uAlpha);
graphics.lineTo(lineToX,lineToY);
}

//绘制其它线条
public function drawLine1(x1:Number,y1:Number,x2:Number,y2:Number):void
{
graphics.lineStyle(uWidth,uColor,uAlpha);
graphics.moveTo(x1,y1);
graphics.lineTo(x2,y2);
}
}
}


 2:箭头绘制对象(Arrow类)

   
package Spring
{
import mx.core.UIComponent;
public class Arrow extends UIComponent
{
public var CWidth:Number;
public var CHeight:Number;
public function Arrow(cW:Number=25,cH:Number=25)
{
init();
this.CWidth = cW;
this.CHeight = cH;
}
//绘制箭头
public function init():void
{
graphics.lineStyle(1,0,1); //箭头边框样式
graphics.beginFill(0xffff00); //箭头填充颜色
graphics.moveTo(-5,-2.5);
graphics.lineTo(0,-2.5);
graphics.lineTo(0,-5);
graphics.lineTo(5,0);
graphics.lineTo(0,5);
graphics.lineTo(0,2.5);
graphics.lineTo(-5.0,2.5);
graphics.lineTo(-5.0,-2.5);
graphics.endFill();

}
}
}


  3:主程序(线条绘制控制及箭头控制类)

   
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TextInput x="127" y="38" width="68" id="txtLeft" text="10"/>
<mx:TextInput x="203" y="38" width="68" id="txtTop" text="10"/>
<mx:TextInput x="203" y="68" width="68" id="txtHeight" text="100"/>
<mx:TextInput x="127" y="68" width="68" id="txtWidth" text="100"/>
<mx:Button x="421" y="38" fillAlphas="[1.0, 1.0]" fillColors="[#F7F0F0, #F7F0F0]" id="btnDrawLine" label="绘制" click="drawLine()"/>
<mx:Canvas id="canvasDraw" x="19" y="110" width="520" height="392" color="#F3F7F8" backgroundColor="#D35A5A">
</mx:Canvas>
<mx:Label x="64" y="40" text="起点坐标:"/>
<mx:Label x="64" y="70" text="长 宽:"/>
<mx:Script>
<!--[CDATA[
import Spring.Arrow;
import Spring.Line;
import flash.events.Event;
private var startPoint:Point = new Point();
private var cWidth:Number;
private var cHeight:Number;
private var currPoint:Point = new Point();
private var line:Line = new Line(1,0xff88ff,1.5);
private var currDrawState:Number; //1:向右,2:向下,3:向左,4:向上
private var isInit:Boolean=true;
private var arr:Arrow = new Arrow(25,25);
private function drawLine():void
{
startPoint.x = Number(txtLeft.text);
startPoint.y = Number(txtTop.text);
cWidth = Number(txtWidth.text);
cHeight = Number(txtHeight.text);
currPoint.x = startPoint.x;
currPoint.y = startPoint.y;
line.graphics.clear();
line.drawLine(startPoint,currPoint);
currDrawState = 1;
if(isInit)
{
canvasDraw.addChild(line);
canvasDraw.addChild(arr);
arr.rotation = 0;
this.addEventListener(Event.ENTER_FRAME,onEnterFrame);;
isInit = false;
}
}
private function onEnterFrame(e:Event):void
{
switch(currDrawState)
{
case 1:
currPoint.x += 1;
if(currPoint.x >=startPoint.x + cWidth)
{
currPoint.x = startPoint.x + cWidth
currDrawState = 2;
arr.rotation = 90;
}
break;
case 2:
currPoint.y += 1;
if(currPoint.y >=startPoint.y + cHeight)
{
currPoint.y = startPoint.y + cHeight;
currDrawState = 3;
arr.rotation = 180;
}
break;
case 3:
currPoint.x -= 1;
if(currPoint.x <= startPoint.x)
{
currPoint.x = startPoint.x;
currDrawState = 4;
arr.rotation = 270;
}
break;
case 4:
currPoint.y -= 1;
if(currPoint.y <= startPoint.y)
{
currPoint.y = startPoint.y;
currDrawState = 1;
line.graphics.clear();
line.drawLine(startPoint,currPoint);
arr.rotation = 0;
}
break;
}
line.drawLines(currPoint.x,currPoint.y);
arr.x = currPoint.x;
arr.y = currPoint.y;
}
]]-->
</mx:Script>
</mx:Application> 


 

 在主程序中实例化相应对像调用相应方线条绘制,这样逻辑清晰,同时提高代码的可重用度

完成后效果如



 

源码:http://download.csdn.net/source/1865710
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐