回答带箭头移动绘制矩形,小议AS3.0面向对像
2009-12-02 13:43
197 查看
根据需求我将功能分为三块
1:线条绘制对象(Line类)
2:箭头绘制对象(Arrow类)
3:主程序(线条绘制控制及箭头控制类)
在主程序中实例化相应对像调用相应方线条绘制,这样逻辑清晰,同时提高代码的可重用度
完成后效果如
![](http://p.blog.csdn.net/images/p_blog_csdn_net/xingjunli/EntryImages/20091202/aaa.jpg)
源码:http://download.csdn.net/source/1865710
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://p.blog.csdn.net/images/p_blog_csdn_net/xingjunli/EntryImages/20091202/aaa.jpg)
源码:http://download.csdn.net/source/1865710
相关文章推荐
- CreateJs系列教程之 EaselJs_3_绘制移动矩形(Shape)
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
- openGL绘制移动的矩形
- Silverlight实现对图片的涂鸦、绘制矩形、圆形、直线、文本,并且能够移动
- 用Pygame绘制移动的矩形
- drawRect绘制图片、箭头、矩形(Demo)
- android Canvas 向左上、右上、左下 方向绘制矩形不能跟随手指移动问题
- 用CRectTracker绘制一个矩形区域,并且可以移动该矩形
- Python通过Pygame绘制移动的矩形实例代码
- [vc]在鼠标移动过程中绘制矩形,有效解决重影问题
- MFC中基于对话框利用CRectTracker实现多矩形绘制、选择、拉伸、移动和删除
- GDI+绘制矩形,并且实现可旋转、缩放、移动功能(基于MFC对话框)
- winfrom-绘制矩形并移动
- C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框
- C# 实现完整功能的截图控件(1)-实现绘图工具栏控件 控件实现了截图、绘制矩形、圆形、箭头、线条、文字,还需要可以撤销绘制步骤、保存图形等功能,基本实现了跟QQ2008截图一样的功能,还可以更
- Silverlight实现对图片的涂鸦、绘制矩形、圆形、直线、文本,并且能够移动
- C#GDI绘制矩形框,用鼠标移动、放大缩小矩形框
- 去掉任务栏图标.不显示移动矩形
- Workflow:采用坐标变换(移动和旋转)画箭头
- ISV客户博客系列:iVoteSports通过Windows Azure扩展它的面向棒球的移动游戏应用程序