flex 圆形布局

<?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)" mouseMove="myMouseMoveHandler(event)">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.core.IVisualElement;

import mx.core.IVisualElementContainer;

import mx.events.FlexEvent;

import spark.components.Button;

protected function init(event:FlexEvent):void

{

//画一个圆作参考,可知initX=500,initY=400是圆心坐标,r=350是圆的半径

g.graphics.lineStyle(3,0x000000);

g.graphics.drawCircle(500,400,350);

circleLayout(g,20,500,400,350);

}

public static function circleLayout(target:IVisualElementContainer,len:int,initX:Number,initY:Number,r:Number):void

{

for(var i:int=0;i<len;i++)

{

//注意计算机的0弧度在x轴的负半轴,+为顺时针,-为逆时针,跟数学坐标刚好相反

var aphla:Number=-(0.5*Math.PI+i*2*Math.PI/len);//弧度

//这段还可以继续加工,提出一个公共的接口来

var btn:Button=new Button;

//180角度=PI弧度

btn.rotation=aphla/Math.PI;//角度

btn.x=initX-r*Math.cos(aphla);

btn.y=initY+r*Math.sin(aphla);

btn.label=(i+1)+", x:"+btn.x+" y:"+btn.y;

target.addElement(btn);

}

}

[Bindable]private var mx:Number;

[Bindable]private var my:Number;

protected function myMouseMoveHandler(event:MouseEvent):void

{

//这个坐标是相对于鼠标移动到的控件得到的

mx=event.localX;

my=event.localY;

}

]]>

</fx:Script>

<s:Label text="x:{mx},y:{my}"/>

<s:Group id="g" width="100%" height="100%"/>

</s:WindowedApplication>

注意三角函数中的参数用的是弧度

参考:诱导公式:http://baike.baidu.com/link?url=Mj5x_Iw1P5_XgOXxaoRwV_ef7aGSILvom9ayUNBGvArD2leawaqomFydRY-ynls8

flex 圆形布局,码迷,mamicode.com