快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

用FLASH AS实现鼠标画圆的效果

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

  预览:

« Full Screen »

  一、基本定义:虽然说不说大家都清晰,但是我还是想讲一下,以免一些人忘得差不多了~~

  圆:平面上到定点距离等于定长的点的轨迹。
椭圆:平面上到两定点距离和等于定长(定长大于两定点间距离)的点的轨迹。

  二、问题描述:画圆和椭圆,使用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个椭圆 } }

  源码下载


返回类别: Flash教程
上一教程: 在Flash中用数组建地图的贪吃蛇游戏
下一教程: 鼠绘技术内幕完全接触??效果篇

您可以阅读与"用FLASH AS实现鼠标画圆的效果"相关的教程:
· Flash MX 2004实现场景随鼠标移动效果
· Flash轻松实现鼠标特效
· Flash实现在花间自由地翱翔小鸟的效果
· Flash AS编写代码实现三维环视效果
· Flash+Photoshop实现图片模糊效果动画
    微笑服务 优质保证 索取样品