学步园

 圆的切线其实在使用当中有一些应用，特别是在分布的时候,在flash 当中圆的技术使用是经常而且实用性很高，这张图片就是通过分布而来的，但是同时加入一些阴影的滤镜让其看起来更加好看。

当中的做法。

下面我们看看不同地方，和有趣对比，左边图中 和右边的图 差别在于图片的注册点相对位置，按普通说话，左边图是按左上角作为注册点，

右边图则是以中心点位置。在计算的时候，我发觉第二种会比第一种处理切线的时候容易一点。我们可以把图片看左是一条线，线角度变化了，则图会跟随转动。当这些线与圆形成切线的时候， 看起来就很像图片在于圆进行相切。也可以按这种思路和想象去想，但是对于左边的图，则用起来不怎样爽，暂时没有对其进行计算出来。相反第二种就容易了。

求切线的办法，可以参考上一篇的做法。不知道有无更加简单的做法，目前我仅仅知道这种通过坐标来计算斜率的办法。

可以试试看看效果如何！如果对其有更加好的做法，不妨提出来。

package<br /> {<br /> //写于2010年6月13日<br /> //author 夏天的树人<br /> import flash.display.Sprite;<br /> import flash.display.Shape;<br /> import flash.events.*;<br /> import flash.geom.*;<br /> import flash.filters.GlowFilter;<br /> import flash.display.Loader;<br /> import flash.display.Bitmap;<br /> import flash.net.*;<br /> import flash.filters.DropShadowFilter;<br /> import flash.display.IBitmapDrawable;<br /> import flash.display.BitmapData;</p> <p> public class Main extends Sprite<br /> {</p> <p> private var pen:Shape=new Shape();<br /> private var angle:Number=0;<br /> private var image_num:int=0;<br /> private var list:Array=[];<br /> private var Image_contain:Sprite=new Sprite();//中心点容器<br /> private var filter:DropShadowFilter;<br /> private var Image:BitmapData=new BitmapData(200,200,true,0xffffff);<br /> public function Main()<br /> {<br /> init();<br /> }<br /> private function init():void<br /> {<br /> filter=new DropShadowFilter();<br /> filter.strength=0.3;</p> <p> var list:Array=["image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg",<br /> "image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg",<br /> "image/9.jpg","image/10.jpg","image/11.jpg","image/12.jpg",<br /> "image/13.jpg","image/14.jpg","image/15.jpg","image/16.jpg"<br /> ];<br /> init_image(list);//初始化图片<br /> addChild(Image_contain);<br /> Image_contain.addChild(new Bitmap(Image));<br /> Image_contain.x=340;<br /> Image_contain.y=250;<br /> drawBase(this,Image_contain,140,104);</p> <p> }<br /> //初始化图片<br /> private function init_image(list:Array):void<br /> {<br /> var len:int=list.length;<br /> image_num=len;<br /> for (var i:int=0; i<len; i++)<br /> {<br /> var loader:Loader=new Loader();<br /> loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onloadImageComplete);<br /> loader.load(new URLRequest(list[i]));<br /> }<br /> }<br /> private function onloadImageComplete(event:Event):void<br /> {<br /> event.currentTarget.removeEventListener(Event.COMPLETE,onloadImageComplete);<br /> var bitmap:Bitmap=event.currentTarget.content as Bitmap;<br /> bitmap.scaleX=bitmap.scaleY=0.5;<br /> bitmap.x=-bitmap.width/2;<br /> bitmap.y=-bitmap.height/2; </p> <p> var bitmapContain:Sprite=new Sprite();<br /> bitmapContain.addChild(bitmap);</p> <p> mouseListener(bitmapContain);//鼠标监听<br /> drawBase(bitmapContain,bitmap,bitmap.width,bitmap.height);//绘制底部，让图片看起来更加好看</p> <p> image_num--;<br /> list.push(bitmapContain);<br /> if (image_num==0)<br /> {</p> <p> sortIamge(list);<br /> drawImage(Image_contain,list[0],Image);</p> <p> }<br /> }</p> <p> //图片鼠标监听<br /> private function mouseListener(target:Sprite):void<br /> {<br /> target.addEventListener(MouseEvent.MOUSE_OVER,target_MouseOver);<br /> target.addEventListener(MouseEvent.MOUSE_OUT,target_MouseOut);<br /> target.addEventListener(MouseEvent.MOUSE_DOWN,target_MouseDown);<br /> }</p> <p> private function target_MouseOver(event:MouseEvent):void<br /> {<br /> event.currentTarget.alpha=0.7;<br /> event.currentTarget.scaleX=event.currentTarget.scaleY=1.5;<br /> }<br /> private function target_MouseOut(event:MouseEvent):void<br /> {<br /> event.currentTarget.alpha=1;<br /> event.currentTarget.scaleX=event.currentTarget.scaleY=1;<br /> }<br /> private function target_MouseDown(event:MouseEvent):void<br /> {<br /> drawImage(Image_contain,event.currentTarget,Image);<br /> }</p> <p> //绘制中心图片<br /> private function drawImage(Image_contain:Sprite,target:*,Image:BitmapData)<br /> {<br /> Image=target.getChildAt(1).bitmapData;<br /> Image_contain.graphics.clear()<br /> Image_contain.graphics.beginBitmapFill(Image);<br /> Image_contain.graphics.drawRect(0,0,Image.width,Image.height);<br /> Image_contain.graphics.endFill();<br /> }</p> <p> //对图片进行重新排序<br /> private function sortIamge(list:Array):void<br /> {<br /> var len:int=list.length;<br /> var perangle:Number=2*Math.PI/len;</p> <p> for (var i:int=0; i<len; i++)<br /> {<br /> var photo:*=list[i];<br /> addChild(photo);</p> <p> photo.x=400+(200+photo.height/2)*Math.cos(i*perangle)<br /> photo.y=300+(200+photo.height/2)*Math.sin(i*perangle);<br /> photo.rotation=getline_k(400,300,i*perangle,200);//根据斜率求出偏移角度<br /> //if(photo.rotation<0)<br /> //photo.scaleY=-1;not_set_yet.beginBitmapFill():void<br /> //trace(photo.rotation);<br /> }<br /> }</p> <p> //计算圆上任意一点切线的斜率角度<br /> private function getline_k(starX:Number,starY:Number,angle:Number,R:Number):Number<br /> {<br /> var px:Number=starX+R*Math.cos(angle);<br /> var py:Number=starY+R*Math.sin(angle);<br /> var k:Number=-(starX-px)/(starY-py);<br /> return Math.atan(k)*180/Math.PI;</p> <p> }<br /> //绘制图片底部<br /> private function drawBase(contain:*,target:*,w:Number,h:Number):void<br /> {<br /> var shape:Shape=new Shape();<br /> contain.addChildAt(shape,0);<br /> shape.graphics.lineStyle(0,0,0);<br /> shape.graphics.beginFill(0xffffff);<br /> shape.graphics.drawRect(target.x-w/20,target.y-h/20,w+w/10,h+h/10);<br /> shape.graphics.endFill();<br /> shape.filters=[filter];<br /> }<br /> }<br /> }