flex 圆形布局

时间：2014-07-22 23:05:55 阅读：338 评论：0 收藏：0 [点我收藏+]

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

flex 圆形布局

标签：style http color os width io

原文地址：http://blog.csdn.net/yuqixiansheng/article/details/24725849

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行