首页 > 代码库 > flex 圆形布局

flex 圆形布局

2024-07-02 12:26:56   228人阅读

<?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  


联系
我们