flex 圆形布局

圆形布局是一个比较有创意的布局.但是也不能滥用.一般说来圆形布局的元素在4到8个最好.看着比较舒服.

下面是一个圆形布局的代码,将8个小圆圈均匀分布在圆周

<?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"
					   creationComplete="init(event)" 
					   >
	<fx:Script>
		<![CDATA[
			import mx.core.IVisualElementContainer;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			import mx.graphics.SolidColorStroke;
			
			import spark.primitives.Ellipse;
			
			protected function init(event:FlexEvent):void
			{
				trace(Math.sin(Math.PI/6));
				trace(Math.sin(Math.PI/3));
				circleLayout(g);
			}
			
			public function circleLayout(container:IVisualElementContainer,
												r:Number = 100):void
			{
				var initX:Number = (container as UIComponent).width/2;
				var initY:Number = (container as UIComponent).height/2;
				var count:int = 8;//这里写死了要画八个小圆圈
				var len:int = count - 1;
				for(var i:int = 0;i <= len;i++)
				{
					var circle:Ellipse = new Ellipse;
					if(i == 0)//用这个条件表示出第一个圆圈从哪边开始画
						circle.stroke = new SolidColorStroke(0xff0000);
					else
						circle.stroke = new SolidColorStroke(0x000000);
					var aphla:Number= -(2*Math.PI*i/len);//弧度
					circle.x = initX + r*Math.cos(aphla);
					circle.y = initY + r*Math.sin(aphla);
					circle.width = circle.height = 20
						
					container.addElement(circle);
				}
			}
			
		]]>
	</fx:Script>
	<s:BorderContainer borderWeight="2" id="g" left="30" top="20" width="500" height="500">
	</s:BorderContainer>
</s:WindowedApplication>

只要稍微修改一下,便可以进行半圆的布局,这个也是比较常见的,将上例中的2*Math.PI,改为Math.PI,即只布局半个圆周.