Flex4绘制扇形

? ? 本文描述在Flex4中如何绘制给定角度和背景颜色的扇形。

注意：参考了扇形菜单的算法( Tutorials: Step by Step to Create your Sector Menu)

?项目源代码：?Flex4绘制扇形源代码

?一、Sector ?as类

? ? ? ?

package cn.showclear.view
{
	import flash.display.Sprite;
	import flash.geom.Point;

	/**
	 *  扇形  
	 * @author LuLihong
	 * @date 2014-04-25
	 */
	public class Sector extends Sprite
	{
		/**
		 * 圆心
		 */
		private var _center:Point;				
		/**
		 * 半径
		 */
		private var _radius:Number=0;	
		/**
		 * 扇形起始相位角度 
		 */
		private var _startAngle:Number=0;
		/**
		 *  扇形角度
		 */
		private var _angle:Number=360;	
		/**
		 * 背景色 
		 */
		private var _fillColor:uint;
		private var _fillAlpha:Number;
		
		public function Sector(center:Point,radius:Number,startAngle:Number,fillColor:uint=0x2C7EB5,fillAlpha:Number=1.0)	{
			this._center = center;
			this._radius = radius;
			this._startAngle = startAngle;
			
			this._fillColor = fillColor;
			this._fillAlpha = fillAlpha;
		}
		
		/**
		 * 画扇形 
		 * @param angle			扇形角度
		 * @param fillColor		背景色
		 * 
		 */
		public function drawSector(angle:Number,fillColor:uint=0x2C7EB5):void {
			this._angle = angle;
			this._fillColor = fillColor;
			
			this.graphics.clear();
			
			this.graphics.lineStyle(1,_fillColor);
			this.graphics.beginFill(_fillColor,_fillAlpha);
			
			if (Math.abs(_angle) > 360)	{
				_angle=360;
			}
			
			var x:Number = _center.x;
			var y:Number = _center.y;
			var n:Number = Math.ceil(Math.abs(_angle) / 45);
			var angleA:Number = _angle / n;
			angleA = angleA * Math.PI / 180;
			var startA:Number = _startAngle * Math.PI / 180;
			
			this.graphics.moveTo(x,y);
			this.graphics.lineTo(x + _radius * Math.cos(startA),y + _radius * Math.sin(startA));
			//圆弧
			for (var i:uint=1; i <= n; i++) {
				startA += angleA;
				var angleMid1:Number= startA - angleA / 2;
				var bx:Number = x + _radius / Math.cos(angleA / 2) * Math.cos(angleMid1);
				var by:Number = y + _radius / Math.cos(angleA / 2) * Math.sin(angleMid1);
				var cx:Number = x + _radius * Math.cos(startA);
				var cy:Number = y + _radius * Math.sin(startA);
				this.graphics.curveTo(bx,by,cx,cy);
			}
			this.graphics.lineTo(x,y);
			this.graphics.endFill();
		}
		
	}
}

? ? ? 二、SectorDemo?

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   showStatusBar="false" 
					   width="400" height="250" creationComplete="initUI()">
	<fx:Script>
		<![CDATA[
			import cn.showclear.view.Sector;
			
			private var sector:Sector;
			private function drawSector():void {
				sector.drawSector(Number(tmValue.text));
			}
			
			private function initUI():void {
				sector = new Sector(new Point(100,100),100,-225);
				sectorContainer.addChild(sector);
				sector.drawSector(225);
			}
		]]>
	</fx:Script>
	
	<s:HGroup x="20" y="20" gap="20">
		<s:SpriteVisualElement id="sectorContainer" width="200" height="200"/>
		<s:VGroup>
			<s:TextInput id="tmValue" text="225"/>
			<s:Button label="设置角度" click="drawSector()"/>
		</s:VGroup>
	</s:HGroup>
</s:WindowedApplication>

效果图二：