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; } } }