首页 > > 网页制作 > Flash >

用FLASHAS实现鼠标画圆的效果

2008-04-02 10:35:41来源：互联网阅读 ()

　　在FLASH或PHOTOSHOP中能够很轻松的画出一个圆或椭圆，怎样做一个作品，让用户能够直接在里面拖动鼠标画出一个圆或椭圆来呢？下面是BreakDS用AS实现这个效果的讲解－－

　　一、基本定义：虽然说不说大家都清楚，但是我还是想讲一下，以免一些人忘得差不多了～～

　　圆：平面上到定点距离等于定长的点的轨迹。

　　椭圆：平面上到两定点距离和等于定长（定长大于两定点间距离）的点的轨迹。

　　二、问题描述：画圆和椭圆，使用AS。

　　三、问题分析：

　　1.圆

　　呵呵，大多数人看到后肯定想：哼～这不简单，不就是描点法嘛？知道方程就行了～嗯，使用方程进行描点，固然是不错的方法，当初我也是这么做的。但是――（First Declare:假如您是用curveTo的，另当别论）

　　我们能够改进那种画圆的方法：

　　首先，为了更好地写出简洁的代码，我们不应采用普通方程，而应采用参数方程：

　　x = r×cos(a) y = r×sin(a) 其中a为参数。

　　然后，很重要的一点，关于时间复杂度，这点不得不考虑：假如a这个参数我们进行描点的时候选用增量为0.01则要进行2PI/0.01次描点，相当大。假如每次都这样，显然不是很好（或许有些人能够接受，但是我往往习惯于无法容忍这样的时间复杂度）。于是我们能够想：圆和圆之间有什么不同？对了，半径，圆心位置而已。那么，就好办了。我们能够先用描点画一个圆存在一个mc里（当然也能够直接用鼠标画个mc），然后到时候复制并调整就OKay了。这是个重要的思想。

　　2.椭圆：

　　圆的标准方程为x^2 y^2 = r^2，而椭圆是x^2/a^2 y^2/b^2=1。而对于圆上的一点（用参数方程表示）：

　　（r×cos(a),r×sin(a)） 其中a为参数。

　　我们假如将x方向按系数kx压缩（或扩大），将y方向按系数ky压缩（或扩大），则为（kx×r×cos(a),ky×r×sin(a)）。这样这个点必在x^2/(kx×r)^2 y^2/(ky×r)^2 = 1上，则这样的点的轨迹是个椭圆！！！

　　这证实了压缩圆所得的图像是椭圆！！

　　如此，我们能够用配置复制出的圆mc的_xscale和_yscale来使他变成需要的椭圆！How nice！～

　　如此画圆和椭圆就快多了

　　四、代码解析

　　

　　

　　

　　

function circleforbase() {//用来画基础圆的mc，以后的任何圆或椭圆都由这个圆复制得来

　　_root.createEmptyMovieClip("circle", 0);//创建一个空的mc

　　circle.lineStyle(1, 0x000000, 100);//配置线的属性

　　var th = 0;//这个是使用圆的参数方程画圆的那个参数～每次以step累加

　　var step = 0.01;//参数的步长，即每隔0.01弧度描一个点

　　with (circle) {

　　moveTo(100, 0);//移到将要画的圆最右边的那个点

　　do {

　　th  = step;//参数值增加

　　lineTo(Math.cos(th)*100, Math.sin(th)*100);//按参数方程描点

　　} while (th<=Math.PI*2);//当参数等于2PI时停止，刚好一个圆周

　　_visible = 0;//将这个画好的圆配置为“隐形”

　　}

　　}

　　circleforbase();//画一个基础圆mc，注意这个基础圆的mc名字叫circle

　　n = 0;//表示圆的个数

　　f = 0;//表示鼠标的状态，1表示处于按下状态，0相反

　　stx = 0;

　　sty = 0;

　　enx = 0;

　　eny = 0;

　　//椭圆将被包涵在一个矩形内，以上的四个变量表示矩形的对角线上的两个顶点，这样能够确定这个矩形

　　function drawoval(sx,sy,ex,ey,n){

　　//画 圆/椭圆 的方法，实际上前面四个参数确定了一个矩形，但要注意只是逻辑上的矩形，

　　//我们并不把他画出来，只是在他的范围内画那个椭圆，下面的注释会阐述这个矩形是什么样子的

　　_root.circle.duplicateMovieClip("cir" n,n);//复制出一个标准圆（半径为100的那个基础mc）

　　with(_root["cir" n]){

　　_xscale = Math.abs(ex-sx)/2;//配置椭圆的平行于x轴的半轴长

　　_yscale = Math.abs(ey-sy)/2;//配置椭圆的平行于y轴的半轴长

　　_x = 0.5*(sx ex);//他的中央的x坐标为矩形对角线中点的x坐标

　　_y = 0.5*(sy ey);//他的中央的y坐标为矩形对角线中点的y坐标

　　}

　　}

　　_root.onMouseDown = function(){

　　f = 1;

　　stx = _root._xmouse;

　　sty = _root._ymouse;

　　n  ;//每当鼠标按下，f值赋为1，矩形的一个顶点即为鼠标按下时的坐标，准备画第n个椭圆。

　　}

　　_root.onMouseUp = function(){

　　f=0;//鼠标松开，f赋为0，这样当鼠标移动时不会继续画椭圆

　　}

　　_root.onMouseMove = function(){

　　if (f){//当鼠标移动时，假如鼠标按下执行代码（即重绘第n个椭圆）

　　enx = _root._xmouse;

　　eny = _root._ymouse;//确定外切这个椭圆的矩形（边平行于坐标轴的矩形）

　　drawoval(stx,sty,enx,eny,n);//在参数确定的那个矩形内重绘第n个椭圆

　　}

　　}

　　效果如下:

　　