锚点是一套用于定位UI的方案。如果想定位一个点，给定一个坐标（二维的或三维的）即可。但通常UI都是有尺寸、有宽高的，给定一个坐标，只能让UI上的某一个点对齐到这个坐标。锚点还可以用来定义UI的旋转中心，或者缩放中心。很多GUI系统（各种类型的游戏）都使用了锚点的概念，它能更高效便捷地帮助设计人员设置UI的位置状态。

概念

例如，现在有一张正方形的图片，其边长是6，想要定位到点A(5, 5)上，现在随便取图片上一个点（现在取的图片的左下角）来对齐到点A，对齐的结果如下所示：

一般UI定位在某个点后，都想把图片的中心对齐到给定的点。在这个示例中就是想要图片的中心对齐到点A，那么需要把图片往左下角偏移(-3, -3)，如下图所示：

那有的UI是自适应尺寸的，就是说它的宽高可能是随着内容动态变化的。如果示例中的正方形图片的边长变成了8，那如果还想要图片的中心对齐到点A，就要改变左下角的偏移量，改为(-4, -4)，如下图所示：

由于图片的尺寸会动态变化，那么为了保持居中，它的偏移量必然也要随之变化，所以不能预先设置某个偏移量，而是要想出一套定位方案。其实我们的需求就是想告诉程序：图片的中心始终对齐点A，这样每次宽高改变，程序会自动计算出新的偏移量。

那我们可以设置两个参数，一个是点A的坐标(5, 5)，另一个就是把“居中”这么一个人类语言的意义告诉“程序”。于是我们可以引入一种称为“锚点”的概念，它是一个坐标，不过它是在图片内部建立的坐标系。这个坐标系以图片左下角为原点，图片右上角的坐标为(1, 1)，如下图所示：

那么图片中心的锚点坐标是(0.5, 0.5)，我们输入点A的坐标(5, 5)和锚点坐标(0.5, 0.5)之后，就可以告诉程序：把图片的中心和点A对齐，并且始终和点A对齐。

所以锚点是一套可以方便定位UI位置的方案。按照上文的描述，如果要示例中的图片的右下角始终和点A对齐，就要输入锚点坐标(1, 0)；类似的，左下角是(0, 0)，右上角是(1, 1)，左上角是(0, 1)。并且可以对齐到图片中任意位置，就算它不是个等分的位置。

如下图所示，想要把图片中左侧小白旗的旗杆最底部和点A对齐，也就是想让旗子插在点A上，那么可以设置锚点坐标为(0.231, 0.257)：

锚点还可以设置超出图片范围之外的点，例如设置(1.2, 0)或者(0, -0.5)，这种超出图片范围的锚点有时候也有它在逻辑上的意义。

锚点不仅可以用来对齐UI上的某一个位置，也指定了这个UI的旋转量是绕UI上的哪一个点在旋转，同理，也是指定了UI缩放时，是保持着UI锚点所在的那个点不变，其它部分以锚点为基准向四周扩散或向内聚合。所以通俗地说，锚点就像在UI上钉了一枚钉子，无论是位移还是旋转、缩放都是以钉子钉住那个点位基准。

Easyv里的基准点

在Easyv的大部分组件配置项中，可以看到一种名为“基准点”的配置，它就是一种锚点。

配置项左边是九个方格状的点位，点击某个点位可以快捷设置锚点坐标。右边显示的是当前设置的锚点坐标，一般的锚点坐标是0到1的取值范围，Easyv中为了降低理解门槛，使用的是0到100的百分数值，只是从0到1映射到0到100而已。

九个方格个点的构成的锚点坐标系是左上角为(0, 0)，右下角为(100, 100)，所以可以得知每个点位点击之后设置的锚点的坐标，例如点击中心的点位，右边坐标会显示为“50% 50%”，点击左下角的点位，右边坐标显示为“0% 100%”。

不仅可以设置9个点位的锚点坐标，在左边区域拖动鼠标，还可以设置0到100范围的任意数值做为锚点坐标。如果想要精确控制锚点数值，也可以在右边两个坐标数值的输入框里输入数字，也可以输入超过0到100范围的数字。

然后基准点设置后的具体效果，就要看每个组件自身的业务了，可以查阅相关组件的文档。