分享
 
 
 

用FLASHAS实现鼠标画圆的效果

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

在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个椭圆

}

}

效果如下:

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有