从绘制 圆形(circle)说开

 　　今天在论坛上看到一个兄弟问“用as 3.0 划一个圆 ”的问题，花了一点时间做了个比较完整的DEMO如下：
 　　涉及知识点：
    1、圆形算法公式(当radiusX != radiusY 时绘制椭圆):
        xPos = centerX + Math.cos(angle) * radiusX; //angle需要转化为弧度; yPox = centerY + Math.Sin(angle) * radiusY;
    2、角度/弧度　转换公式：
    弧度 = 角度 * Math.PI / 180; //计算机在绘制时需要将角度转化为弧度 角度 = 弧度*180 / Math.PI; //数学计算中使用
    3、为了重用线条绘制的类在AS中应用面向对象思想创建了一个线条绘制的组件line如：
    　   package drawhelper { 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 = 1.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 clearLine():void { graphics.clear(); } } }
    4、详细页面源码如下：（应用了数字验证组件、逐帧动画,绑定绘制线条粗细、颜色等知识点）
        <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()"> <mx:Script> <!--[CDATA[ import mx.events.ValidationResultEvent; import drawhelper.line; [Bindable] private var dLine:line; //绘制对象 private var radius:Number; //半径 private var speed:Number = 1; //旋转角度 private var cAngle; [Bindable] private var centX:Number; private function init():void { dLine = new line(); centX= this.canvasGraph.width / 2.0; canvasGraph.addChild(dLine); } private function startDraw(e:ValidationResultEvent):void { radius = Number(txtRadius.text); cAngle = 0; dLine.drawLine(getNewPoint(centX,centX,0,radius,radius),getNewPoint(centX,centX,0,radius,radius)); this.addEventListener(Event.ENTER_FRAME,onDrawCircle); } private var newPoint:Point; private function onDrawCircle(e:Event):void { cAngle += speed; if(cAngle <=360) { newPoint = getNewPoint(centX,centX,cAngle,radius,radius) dLine.drawLines(newPoint.x,newPoint.y); } else { dLine.clearLine(); // 完成后重绘制 dLine.drawLine(getNewPoint(centX,centX,0,radius,radius),getNewPoint(centX,centX,0,radius,radius)); cAngle = 0; } } //增加逐帧动画 private function onPauseCircle():void { if(btnPause.label == "暂停") { btnPause.label ="继续"; this.removeEventListener(Event.ENTER_FRAME,onDrawCircle); } else { btnPause.label ="暂停"; this.addEventListener(Event.ENTER_FRAME,onDrawCircle); } } private function onCancelCircle():void { this.removeEventListener(Event.ENTER_FRAME,onDrawCircle); dLine.clearLine(); } //获取圆上的坐标点(半径不一致时绘制椭圆) public function getNewPoint(centX:Number,centY:Number,angle:Number,radiusX:Number,radiusY:Number):Point { //以下为公式 angle = angle * Math.PI / 180; //将角度转化为弧度 var xPos = centX + Math.cos(angle) * radiusX; //Math运算需要传入弧度 var yPos = centY + Math.sin(angle) * radiusY; return new Point(xPos,yPos); } ]]--> </mx:Script> <mx:NumberValidator minValue="1" maxValue="{canvasGraph.height / 2.0}" valid="startDraw(event)" required="true" integerError="请输入有效半径" exceedsMaxError="半径必须小于画布1/2" lowerThanMinError="半径必须大于1" trigger="{btnStart}" triggerEvent="click" source="{txtRadius}" property="text"/> <mx:Panel x="10" y="10" width="624" height="443" layout="absolute" title="绘制圆形" horizontalAlign="center" verticalAlign="middle"> <mx:Canvas x="0" y="0" width="400" height="400" backgroundColor="#2A72AA" id="canvasGraph" /> <mx:TextInput x="468" y="9" width="120" id="txtRadius" text="200"/> <mx:Label x="429" y="12" text="半径:"/> <mx:Button x="534" y="69" label="开始" id="btnStart" fontSize="16" textAlign="center"/> <mx:Button x="534" y="100" label="暂停" id="btnPause" fontSize="16" textAlign="center" click="onPauseCircle()"/> <mx:Button x="534" y="131" label="取消" id="btnCancel" fontSize="16" textAlign="center" click="onCancelCircle()"/> <mx:ColorPicker x="572" y="39" change="{dLine.uColor =uint(uCp.value)}" id="uCp"/> <mx:NumericStepper x="468" y="39" minimum="0.5" maximum="5.0" stepSize="0.5" change="{dLine.uWidth =Number(uNS.value)}" id="uNS"/> </mx:Panel> </mx:Application>                 

    5、最终运行结果(如需要源码请留下EMAIL):