圆形布局是一个比较有创意的布局.但是也不能滥用.一般说来圆形布局的元素在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,即只布局半个圆周.