Flash的二维坐标系

xiaoxiao2025-02-06  22

1、flash中的二维坐标系   (1)、坐标的转换   flash中场景左上角为(0,0),而在数学中是场景中心为(0,0),怎样把它转成数学中的坐标系呢?假设场景宽度:550,高度400。   x=550/2+this.x;//x右移   y=400/2-thix.y;//y下移   如图1。 图1:转换后的坐标系 图2:角度、弧度的转换   (2)、角度的转换   flash中角度的计算:如图2 hudu = Math.atan2(y, x); // 利用公式tg a=y/x,计算a的值,flash中a是以 弧度表示的 ,我们要把它转换成角度,设圆的半 径r为1,整个弧长为2*pai*r,也就是说360度等于 2*pai弧度,所以转成角度的公式为: jiaodu = hudu*180/Math.PI; // 把弧度转换为角度,公式为:角度=弧度*180/3.14,3.14为pai if (jiaodu<0) { jiaodu = jiaodu+360; } /* 转换后的角度的范围从-180到180, 数学中的角度从0到360,所以小于0时加上360 */   2、flash中的三维坐标系   如图3,z轴表示一个物体离屏幕的远近,当物体的z轴位置增加时,物体朝远离屏幕的方向运动,当物体的z值减小时,物体朝接近屏幕的方向运动。 图3:三维坐标系 图4:二维与三维的点的关系   3、三维坐标转换成二维坐标   如图4,已知一个点(x,y,z),怎样确定该点屏幕上的位置呢?利用三角形相似的原理,可以得出下列结论:   d/(d+z)=y1/y,推出:y1=d*y/(d+z),这公式就是浪子讲的经典的算法,可在二维平面上来表现空间上的点的位置。我们还可把它进一步把它简化。提出因子d/(d+z),用ratio(比率)表示,这个公式就变为   ratio=d/(d+z);   y1=ratio*x;同理可推出   x1=ratio*y;   终于写完第一步了,休息一下,到帝国论坛下了点毛毛雨,接着我们来看第二步   二、控制物体的属性(大小,层次,透明度等)   通过第一步的学习,我们就可建立一些三维的效果,但是还有很多不足之处,如远的物体和近的物体的大小一样,层次可能也不一样,怎么办呢?   1、控制mc的大小   在三维坐标中,当z值增大,也就是远离屏幕时,物体应越小,反之越大。我们怎么在flash中表示一个mc的大小呢?还记得上一步的ratio吗?现在就要用到这东东。当z增加时,ratio减少,因为在ratio中,z是作为分母的。反之,当z减少时,ratio增加。所以可用ratio来控制mc的大小。如下:   mc1._xscale=mc._xscale*ratio;   mc1._yscale=mc._yscale*ratio;   2、控制mc的层次   z值最大,物体应在最底层,最小,在最上层,所以我们可用一个很大的常数减去z值,用此值作为mc的层次。flash中,设置mc的层次用swapDepths,如下:   mc.swapDepths(1000-z);//设置mc的层次   3、控制mc的透明度   远处的物体看上去模糊些,近处的物体清晰些,在flash中,可用_alpha来控制,方法和控制大小类似,不在介绍原理。如下:   mc._alpha=100*ratio;   4、控制mc的角度(旋转)   这一步最难,也最好的东东。学习以后,你将能制作出非常cool的效果   旋转有三种,x旋转:坐标x不变,y旋转:y不变,z旋转:z不变,我们先来推导z旋转。   如下图:从点(x,y,0)转到(x1.y1.0),求点(x1.y1.0)   利用数学中的正弦、余弦公式得出   x1=r*cos(a+b),而cos(a+b)=sina*cosb+cosa*sinb http://www.ies.co.jp/math/java/trig/kahote/kahote.html [解释]   推出:x1=r(cosa*cosb-sina*sinb)   又因为x=r*cosa,y=r*sina   所以x1=x*cosb-y*sinb   同样推出:y1=y*cosb+x*sinb   这就是z旋转的公式。用同样的方法可推出x旋转,y旋转的公式。总结如下: 给定点:(x,y,z) 绕x轴旋转后的点(x1,y1,z1) 绕y轴旋转后的点(x2,y2,z2) 绕z轴旋转后的点(x3,y3,z3)  x旋转(x不变) x1=x y1=y*cosb-z*sinb z1=z*cosb+y*sinb y旋转(y不变) x2=x*cosb-z1*sinb y2=y1 z2=z1*cosb+x*sinb z旋转(z不变) x3=x2*cosb-y1*sinb y3=y1*cosb+x2*sinb z3=z2   从以上公式可看出,在flash要实现旋转,先要求x轴的旋转点,再求y轴的旋转点,最后再求出z轴的旋转点。最后我们来一个x旋转的应用   三、制作x轴旋转的正方体   1、在场景中画一小球,并按F8转换为mc,实例命名为qiu。   2、增加一层,命名为as,接下去我们来写as,如下: root.onLoad = function() { shumu = 8; // 定义复制小球的数目 qiu._x = 6000; // 让原始小球消失 for (var i = 0; i<shumu; i++) { duplicateMovieClip("qiu", "qiu"+i, i); } // 复制小球,作为正方体的八个顶点 qiu_pos_x = new Array(100, 0, 0, 100, 100, 0, 0, 100); qiu_pos_y = new Array(100, 100, 100, 100, 0, 0, 0, 0); qiu_pos_z = new Array(50, 50, -50, -50, 50, 50, -50, -50); // 从三维坐标中取正方体的8个顶点的坐标,保存在数组中 D = 200; // 观察者与屏幕的距离 hutu = 0.001; // 控制旋转的速度 b = hutu*180/Math.PI; // 角、弧度的转换 }; root.onEnterFrame = function() { for (var i = 0; i<shumu; i++) { x1 = qiu_pos_x[i]; y1 = qiu_pos_y[i]*Math.cos(b)-qiu_pos_z[i]*Math.sin(b); z1 = qiu_pos_z[i]*Math.cos(b)+qiu_pos_y[i]*Math.sin(b); // 按公式计算 qiu_pos_x[i] = x1; qiu_pos_y[i] = y1; qiu_pos_z[i] = z1; // 更新数组元素 ratio = D/(D+z1); perspective_x = x1*ratio; perspective_y = y1*ratio; // 按公式计算 _root["qiu"+i]._x = 275+perspective_x; _root["qiu"+i]._y = 200-perspective_y; // 设置球的坐标 _root["qiu"+i]._xscale = _root["qiu"+i]._yscale=50*ratio; // 球的大小 _root["qiu"+i].swapDepths(10000-qiu_pos_z[i]); // 球的层次 _root["qiu"+i]._alpha=100*ratio;//设置透明度 } }; 我的网站设计 web design home page [url]http://www.webdesign-cn.com[/url] [url]http://www.webdesign-china.cn[/url]
转载请注明原文地址: https://www.6miu.com/read-5024095.html

最新回复(0)