PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

自制45度2D引擎之坐标转换

原创
2016-06-07 15:00:47 1901浏览

这是自制的斜45度坐标转换示例图。我们将坐标分成四个转换系,分别是: 平面系 斜面系 旋转系 屏幕系 这几个系都是以O为原点的坐标系,在转换时,除屏幕系外,需要按照顺序转换,逆转换时,也需要逆序转换。 但是在需要显示某个坐标系的效果时,直接将这个系

这是自制的斜45度坐标转换示例图。我们将坐标分成四个转换系,分别是:

平面系

斜面系

旋转系

屏幕系

这几个系都是以O为原点的坐标系,在转换时,除屏幕系外,需要按照顺序转换,逆转换时,也需要逆序转换。 

但是在需要显示某个坐标系的效果时,直接将这个系的坐标点转换为屏幕系的点就可以了。

平面系(xOfy):如同上帝视角一样,这个系标明了物体在平面上的位置,是最普通、最直观的坐标系,由于这个系直观,计算简单,

所以物体的寻路和排序都是由平面系来实现的。

斜面系(xOly):斜面系是由平面系转换得来的,这个系可以看作是一张纸由竖直向后倒下一定角度形成的。这个系是一个准45

度平面,可以看到纸是平行四边形。

旋转系(xOry):由斜面系旋转一定角度形成的,斜面系中的一张纸不仅倒下,而且还绕O点旋转。这样原本在x轴上的点,在斜面系

中仍然在x轴上,但是在旋转系中就不再在x轴上了。

屏幕系(xOsy):屏幕系定义了屏幕的大小(图中红色方框),以及屏幕相对于原点O的方向向量。而且屏幕的坐标与其他坐标系的y轴方向相反。

屏幕系上的点是最终描画需要的点,而平面系上的点是后台计算需要的点,在使用时一般用到这两个坐标系之间的转换。

1.平面系到斜面系的转换:(怕格式乱掉所以公式都写在图上了)

2.斜面系到旋转系的转换:

3.其他系到屏幕系的转换:

需要创建一个屏幕偏移原点O的向量,转换时,将其他系下的坐标减去这个向量,之后将y方向逆转。

x'=x-vect.x;

y'=scrn.y-(y-vext.y);

4.测试

下面是一张效果图,红色图形是平面系到屏幕系下的一个菱形,四个点分别是

(300,300);
(400,200);
(400,400);
(500,300);

蓝色图形是转换到旋转系后再转换到屏幕系下的形状。从左上角引出的线是测试点,蓝色是鼠标所在点,红色是实时转换的点,说明转换是正确的。



声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。