Egret引擎中锚点与坐标的概念

Egret引擎中锚点与坐标的概念

最近在使用H5引擎Egret开发一款桌游。在操控资源对象时，锚点和坐标着实让我脑袋疼了很久，在反复调整后，通过找规律总结了一下概念。

首先我们看到资源对象的属性面板，可以看到有如下几个属性设置项。

宽和高，顾名思义就是资源对象的宽度和高度。那么这个资源对象所在的全部范围，就是一个 16 × 44 的矩形范围，我们先称这个矩形为 Object_Panel。
而我们知道，为了更方便的控制一个资源对象，我们会利用一个点来代表这个资源对象。这个点就叫做锚点，而x锚点，y锚点这两个属性，就是用于描述锚点在Object_Panel的位置。
如图，Object_Panel 的大小是 16 × 44 , 而我x锚点为8，y锚点为44，说明我的锚点设置了在这个资源对象的中间最下方。如果x锚点为8，y锚点为22，那么说明锚点设置了在这个资源对象的正中央。

那么理解完了锚点，我们来理解一下x和y。
我们有资源对象，肯定要把资源对象放在另一个容器里面。例如我们会把游戏角色放置在地形里面。游戏角色是我们的资源对象，而地形是一个容器。假设该地形宽200，高200，称该地形产生的 200 × 200 的矩形为 Map_Panel。
那么这个x和y就是用来描述资源对象的锚点，在 Map_Panel中的相对位置。也就是x和y两个属性，是控制这个资源对象的位置，通过锚点控制。而锚点相对于资源对象的位置是通过x锚点和y锚点来控制的。

讲了半天，可能看两张图会更加形象，下面两张图同样的x和y，不同的锚点位置效果完全不一样。

左图为锚点在底部，右图为锚点在底部。

锚点的坐标我都设为了在 Map_Panel的正中央。可以看见，不同的x锚点和y锚点的设置，并不影响锚点在 Map_Panel中的位置，两个锚点都在方形的正中央。而x锚点和y锚点的不同却影响这个资源对象是如何“延展”开来的。

总结

锚点坐标决定了资源对象自己以什么坐标为参考而展开、显示、旋转。
而坐标通过改变一个资源对象的锚点而改变该资源对象在容器中的位置。

还不理解的，我们想象有一辆车，有一片沙漠。
一辆车，我们可以以方向盘的位置为轴，可以以发动机的位置为轴。汽车如何旋转、汽车如何运动，都会参考这根轴。锚点位置就是决定了这根轴在汽车的哪个位置。
而汽车在沙漠的哪个位置，则通过改变x坐标和y坐标来改变轴在地图上的位置。这样你的汽车也会跟着轴移动到沙漠对应的位置。