从绘制圆形(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>  </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):

从绘制圆形(circle)说开相关推荐

OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学--1.4.基础标识绘制(绘制线line函数.rectangle函数绘制四边形.circle函数绘制圆形.putText函数绘制文字.putText绘制中文文字) 目录 O ...
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
vue 项目使用 openlayers根据半径绘制圆形.绘制多边形这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. ...
html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
python画圆并填充图形颜色_如何使用python设计语言graphics绘制圆形图形
在python设计语言中,可以利用第三方包graphics绘制不同的图形,有圆形.直线.矩形等.如果想要绘制一个圆形,可以设置圆形的半径和坐标位置.下面利用一个实例说明绘制圆形,操作如下: 工具/原料 ...
open cv轮廓周围绘制圆形和矩形
APIapproxPolyDP(精简多边形轮廓点数) 作用是把一个很多点的多边形变成一个点数适中的多边形在这个多边形里面找它的最小连接矩形和最小的圆 approxPolyDP ( InputArra ...
用 turtle 绘制圆形
Turtle 库是 Python 语言中一个很流行的绘制图像的函数库 Turtle 库用于绘制线.圆.其他形状或者文本显示小乌龟的爬行轨迹,初始小乌龟在(0, 0),前进方向为 x 轴正方向绘制圆 ...
openlayers根据半径绘制圆形，多圆连线并标记距离
openlayers根据半径绘制圆形,多圆连线并标记距离实现一个什么效果呢,就是在openlayers上面,绘制三个圆形,绘制完成之后,三个圆心连接起来,然后标记出每两个圆心之间的距离. 期望效果: ...
【OpenGL ES】绘制圆形
1 前言 [OpenGL ES]绘制三角形中介绍了绘制三角形的方法,[OpenGL ES]绘制正方形中介绍了绘制正方形的方法,本文将介绍绘制圆形的方法. OpenGL 以点.线段.三角形为图元,没有 ...
如何使用canvas绘制圆形
Canvas是HTML5中新增的元素,专门用来绘制图形,相当于在页面中放了一张"画布",可以在里面绘制图形,但是不是指用鼠标画图,而是需要用Javascript编写需要绘制的图形的 ...

从绘制圆形(circle)说开