Flash 与数学：圆的切线

  今天计算了一下关于圆的切线，感觉还是挺有趣的。于是动手写了一下，尝试了绘制一条圆的切线，可以求任意圆上一点的切线。

 

 

  计算方法：通过圆心的坐标O和圆上一点M的坐标可以利用这两个关系求出切线的斜率K值

 

           k=-（O.x-M.x）/(O.y-M.y);

 

    这样就可以求出切线的斜率，然后再通过反正切可以求出切线的倾斜角度A值。

 

   我们使用flash绘制的直线的时候，需要知道两点坐标。其一，我们已经知道了M的坐标点，另外一点可以通过直线的参数方程求出另外一点的位置。

 

下面是通过一个代码演示这个过程：

package { //写于2010年6月11日 //author 夏天的树人 import flash.display.Sprite; import flash.display.Shape; import flash.events.*; import flash.geom.*; public class Main extends Sprite { private var pen:Shape=new Shape(); private var angle:Number=0; public function Main() { init(); } private function init():void { addChild(pen); pen.x=250; pen.y=200; drawCircle(100); //trace(line_k(250,200,45,100));//输出斜率 drawLine(new Point(250,200),100,45,100); addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { this.graphics.clear(); angle++; if(angle>360) { angle=0; } drawLine(new Point(250,200),100,angle,100); //drawLine(new Point(250,200),100,angle+30,100); //drawLine(new Point(250,200),100,angle+45,100); //drawLine(new Point(250,200),100,angle+60,100); } private function drawCircle(R:Number):void { pen.graphics.lineStyle(1); pen.graphics.drawCircle(0,0,R); } //计算圆上任意一点切线的斜率 private function getline_k(starX:Number,starY:Number,angle:Number,R:Number):Number { var px:Number=starX+R*Math.cos(angle*Math.PI/180); var py:Number=starY+R*Math.sin(angle*Math.PI/180); var k:Number=-(starX-px)/(starY-py); return Math.atan(k); } //绘制切线 //circlePoint 圆心位置坐标 //line_length 线段长度 //angle 角度 //R 半径 private function drawLine(circlePoint:Point,line_length:Number,angle:Number,R:Number):void { var px:Number=circlePoint.x+R*Math.cos(angle*Math.PI/180); var py:Number=circlePoint.y+R*Math.sin(angle*Math.PI/180); var k:Number=getline_k(circlePoint.x,circlePoint.y,angle,R); //直线参数方程 var start_lineX:Number=px-line_length*Math.cos(k); var start_lineY:Number=py-line_length*Math.sin(k); var end_lineX:Number=px+line_length*Math.cos(k); var end_lineY:Number=py+line_length*Math.sin(k); this.graphics.lineStyle(1,0xff0000); this.graphics.moveTo(start_lineX,start_lineY); this.graphics.lineTo(end_lineX,end_lineY); this.graphics.moveTo(circlePoint.x,circlePoint.y); this.graphics.lineTo(px,py); } } }

 

 

通过这个程序原理可以让其创造出其他图案.

 

其中的改造的时候，通过360度围绕来进行描绘线条。这样显示出的效果就如上图

我们把drawLine下面的代码屏蔽了，然后在int()初始化函数的里面进行创建这些图案。

 

//this.graphics.moveTo(circlePoint.x,circlePoint.y);
// this.graphics.lineTo(px,py);

 

 

for(var i:int=0;i<360;i+=5) drawLine(new Point(250,200),100,i,100);

 

我们可以增加一些滤镜的特效，让其变化成下面的效果图。同时使用滤镜的时候，会让创造带来一些意外的收获。

可以进行试试。

 

添加简单方法：

var filter:GlowFilter=new GlowFilter(); filter.blurX=50; filter.blurY=30; filter.color=0xcccccc; this.filters=[filter];

 

 

 

通过封装曲线：我们也可以尝试封装一个简单类进行调用。进行日后方便调用这种图案

 

///CircleLine.as 该类为圆切线所创建的图案 //vesion 1.0 //author 夏天的树人 package { import flash.geom.Point; import flash.display.Sprite; public class CircleLine extends Sprite { public function CircleLine() { } //创建圆切线曲线图案 public function CreatCircleLine(radius:Number,line_length:Number,n:int=5):void { for(var i:int=0;i<360;i+=n) { drawLine(radius,line_length,i); } } private function drawLine(radius:Number,line_length:Number,angle:Number):void { var px:Number=radius * Math.cos(angle * Math.PI / 180); var py:Number=radius * Math.sin(angle * Math.PI / 180); var k:Number=getline_k(angle,radius); //直线参数方程 var start_lineX:Number=px - line_length * Math.cos(k); var start_lineY:Number=py - line_length * Math.sin(k); var end_lineX:Number=px + line_length * Math.cos(k); var end_lineY:Number=py + line_length * Math.sin(k); this.graphics.lineStyle(1,0xff0000); this.graphics.moveTo(start_lineX,start_lineY); this.graphics.lineTo(end_lineX,end_lineY); } //计算圆上任意一点切线的斜率 private function getline_k(angle:Number,radius:Number):Number { var px:Number= radius * Math.cos(angle * Math.PI / 180); var py:Number= radius * Math.sin(angle * Math.PI / 180); var k:Number=- px /py; return Math.atan(k); } } }

 

 

实现的方法：

var circle:CircleLine=new CircleLine(); circle.CreatCircleLine(100,100); circle.x=250; circle.y=200; addChild(circle);

 

 

观看地址：http://summertree.googlecode.com/svn/trunk/