Flash 与分布学构想：圆弧分布

圆弧分布是依据圆弧的特性所做出的一种分布设计，利用弧线的坐标，我们让我们希望的对象放置在弧线点上。通过弧线的特性结合，让我们分布的图形呈现弧线的效果。

为了求出弧线，可以首先设置弧线两端的角度，通过这两个角度，求出弧线的点，根据我们喜欢的形状进行分布图形。

在这个实验当中，让一段文字呈现一个弧形效果，我们首先求出他们所在的坐标点。再让这些文字赋予他们x和y坐标，这样，圆弧分布就可以完成了。

他可以看作是圆形分布的其中一部分。利用三角函数求出曲线上的点，然后赋予他们的位置，这样就能够体现这个设计的有趣地方。

不妨试试。

package 
{
	//弧线分布
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.Point;
	import flash.display.BitmapData;
	import flash.text.*;
	import flash.display.Bitmap;
	import flash.display.Shape;

	public class Main extends Sprite
	{
		private var str:String="祝各位朋友元宵节快乐阿";
		public function Main()
		{
			 init(11);
		}
		
        private function init(n:int):void
		{
			var posArray:Array=getPosArray(20,270,150,n);//获取对应的坐标值
			
			for(var i:int=0;i<n;i++)
			{
				var textfield:TextField=new TextField();
				textfield.autoSize=TextFieldAutoSize.LEFT;
				textfield.defaultTextFormat=new TextFormat("Arail",20,0x000000,true);
				textfield.text=str.charAt(i);
				//创建位图，用于复制文本
				var bitmapData:BitmapData=new BitmapData(textfield.textWidth,textfield.textHeight,true,0x0);
				bitmapData.draw(textfield);
			   
			
				var fontBitmap:Bitmap=new Bitmap(bitmapData,"auto",true);
				fontBitmap.x=-fontBitmap.width/2;
				fontBitmap.y=-fontBitmap.height/2;
				var contain:Sprite=new Sprite();
				contain.addChild(fontBitmap);
				
				contain.x=stage.stageWidth/2+posArray[i].x;
				contain.y=stage.stageHeight/2+posArray[i].y;	
				contain.rotation=getCircle_K(posArray[i].angle);
				if(-posArray[i].angle*180/Math.PI>180)contain.scaleX=contain.scaleY=-1;
				
				//底圆
				var circle:Shape=new Shape();
				circle.graphics.lineStyle(0);
				circle.graphics.beginFill(0x80FF00);
				circle.graphics.drawCircle(0,0,20);
				circle.graphics.endFill();
				circle.x=contain.x;
				circle.y=contain.y;
				addChild(circle);
				addChild(contain);
			}	
		}
		
		//返回坐标位置
		private function getPosArray(startAngle:Number,endAngle:Number,radius:Number,n:uint):Array
		{
			var posArray:Array=[];
			if(n<=1) return null; 
			var perAngle:Number=(endAngle-startAngle)/(n-1);	
			for (var i:int=0; i<=n; i++)
			{
			   var px:Number=radius*Math.cos(-(i*perAngle+startAngle)*Math.PI/180);
			   var py:Number=radius*Math.sin(-(i*perAngle+startAngle)*Math.PI/180);
			   var args:Object={x:px,y:py,angle:-(i*perAngle+startAngle)*Math.PI/180};
			   posArray.push(args);		
			}
           return posArray;
		}
		
		//获取切线角度
		private  function getCircle_K(angle:Number):Number
		{
			var px:Number=Math.cos(angle);
			var py:Number=Math.sin(angle);
			var k:Number=- px / py;
			return Math.atan(k) * 180 / Math.PI;
		}
		
	}


}