- 浏览: 92517 次
- 性别:
- 来自: 上海
文章分类
最新评论
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
http://www.webdesign-cn.com
http://www.webdesign-china.cn
(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
http://www.webdesign-cn.com
http://www.webdesign-china.cn
发表评论
-
Android游戏开发
2011-07-01 15:26 196Android开发中Activity是个 -
Flash WebGame 开发经验心得和PureMVC框架细说
2011-06-28 14:02 1523→前端的主程序架构和模块划分与人手和人事分工是紧密联系在一起的 ... -
Flash中的深度排序
2011-06-28 11:34 1235As for Multiplayer Games and Vi ... -
Flex 中的callback
2011-06-28 11:16 932Flash支持传递函数做完参数传递。 下面是主函数中的方法 ... -
常用flash引擎和框架
2011-06-27 11:08 2907官方在线帮助(没标英文的都是中文) 用于 Adobe Flas ... -
原来flash player对图片的解码不是异步的,AIR2.6后就异步了
2011-06-27 10:53 817用过 Loader 对象的人都知道,加载图片时,无论是使用 l ... -
Flash WebGame 开发经验心得和PureMVC框架细说
2011-06-27 10:32 1034→前端的主程序架构和模块划分与人手和人事分工是紧密联系在一起的 ... -
简要评说Adobe的FlashPlayer的渲染算法
2011-06-27 10:22 971前些时候看到CSDN上一篇文章介绍FlashPlayer的渲染 ... -
游戏中的智能寻路
2011-05-22 18:20 1222近年来,游戏产业的快 ... -
as3中ProgressEvent的bytesTotal始终为0
2011-05-16 09:50 1480as3中ProgressEvent的bytesTotal始终为 ... -
使用URI-Style Namespace编译ActionScript/Flex Library
2011-05-12 11:10 794当你开发了一个有着多个Pacakge的类库,并在MXML中使用 ... -
环境贴图
2011-03-29 10:49 1045教程:实时环境映射贴图技术实时环境映射贴图技术(Real-ti ... -
Python之旅
2010-12-09 19:40 923一直用AS3+Red5做一些小游戏,感觉挺方便的,特别在做上下 ... -
flash player10的rotationY的使用
2010-12-07 12:26 1576flash player10提供了对3D的支持,虽然功能不够强 ... -
red5的常用方法
2010-12-03 10:11 954在使用red5+flash做rpg游戏开发的时候有些功能是需要 ... -
PV3d性能优化
2010-11-25 14:19 1314当你优化你的程序时, ... -
PV3D处理3D矢量绘图与3D文本
2010-08-23 11:46 1138Papervision3D主要以位图为 ... -
Flash中矢量和位图的使用
2010-06-09 16:47 851最近在做一个世界地图的Flash,其中导入一个很大的矢量图形, ... -
flex 3 + .net开发flash Remoting四[完整代码
2010-03-02 20:49 724一. 相关说明: 本 ... -
关于PV3D常用材质的讨论
2009-12-17 14:05 1087PV3D中的贴图材质有很多。 颜色材质Co ...
相关推荐
这个二维坐标系是完全继承View,本人在处理图片灰度值的时候用到,很简单美观的二维坐标系,找了很久合适的,于是自己写了一个,该坐标系可以连接坐标上坐标点,为了方便我只连接了3个点,很多点的时候,可以用循环...
画布建立二维直角坐标系,添加一个标记在(0,0)点,可控制标记移动,可自由二次开发,压缩包内有有用法,不会的可以私聊我
基于MATLAB的二维坐标系变换,陈兆林,张书毕,利用MATLAB的Delaunay函数功能将整个测区内的已知控制点连成三角网并计算各个三角形区域内的坐标转换参数,利用不同三角形区域内的转�
可以画出两个二维坐标系,一个相对于另外一个旋转一定角度,我们可以通过自己修改参数改变旋转的角度,适合快速做出二维坐标系旋转图(没有在坐标系中画出其他东西)
运用MFC编的一个二维坐标系,并且可画点连线
二维坐标系的转换 二维坐标系的变换分为旋转变换和平移变换。 一、旋转变换 二、平移变换 三、旋转平移变换
自己之前写过的kinect V2的坐标映射的通用性太差,所以这次写了一个节点,利用深度相机ROS节点发布的深度与彩色对齐的图像话题和图像信息内外参话题,将二维坐标映射到三维坐标系。 - 我挂上来的这个节点是将鼠标...
一个简单的小程序,可以实现在二维坐标系下对离散点求极大值
不同三维坐标系通过欧拉角转换,C语言实现。
二维坐标转换
鼠标移动时候显示十字交叉线cpu消耗量比较高,求优化
适合用MFC画坐标系
三维直角坐标系与球坐标系的相互转换 球坐标为方位角,高度角和相对于半径R的高度
用Matlab画三维坐标系下的点,给出x、y、z轴坐标点,用scatter3(X,Y,Z,'filled')
对于以前数学学习不好的人来说,在机器人的坐标变换里,总是各种蒙。 这个图片来给你解答 机器人坐标系变换 坐标变换-旋转部分 二维坐标旋转的向量和几何表示
二维数据或者图片堆叠在三维空间的表示,图片堆叠方便查看 类似origin里面的瀑布图的方法,只是这是在matlab里面实现。 matlab多张图片同时在三维空间中显示,沿着某一个坐标轴
计算二维坐标到3D坐标的转换,计算方法十分有用
ubuntu16.04 下在qt 5.9.0 下采用opengl 利用glut画3维坐标系
本例实现在三维的坐标系中绘制图形,可以从COM口接收数据,并根据接收的数据在三维的坐标系中绘制图像。同时实现了把三维的曲线投影到三个平面上。
数据库中的二维数据在坐标系中描绘其关系曲线Jsp网页版