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

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

平面系

斜面系

旋转系

屏幕系

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

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

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

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

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

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

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

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

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

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

１.平面系到斜面系的转换：（怕格式乱掉所以公式都写在图上了）

２.斜面系到旋转系的转换：

３.其他系到屏幕系的转换：

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

x'=x-vect.x;

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

４.测试

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

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

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