flex 圆形布局

来源：互联网发布：淘宝网店托管公司编辑：程序博客网时间：2024/05/16 14:35

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

0 0