UGUI系列——RectTransform之锚点及轴心点深入解析

UGUI系列其他博文，可通过导航帖查看

前言

上一篇博文简单的介绍了一些锚点及轴心的基础概念，下面继续说一下锚点及轴心点的用法

1.组件属性的显示模式

点击下图中的红框内的图标，会出现这样一个菜单

Normal ：就是组件默认的显示模式
Debug ：这种模式下，会显示出很多其他的属性

2.AnchorPosition

在组件的debug模式下，可看到这个属性

它代表的就是锚点的位置

锚点位置分两种情况理解：

1)四个锚点是在一起的

这种情况下，AnchorPosition很明显就是它们的交点

2)四个锚点是分开的

这种情况下，AnchorPosition就代表的是他们连接线交点的位置

3.Position的显示

RectTransform是Transform的子类，所以它最基础的属性就是Position，Rotation和Scale

但是在UI里，它position的Z值并没有意义，它的UI遮盖关系是由渲染层级控制的，并不是这个值

Position值的显示和锚点及轴心点的位置有关系

这里分几种情况（均是在无父物体的情况下，有父物体需要另行讨论）

1）UI的锚点和轴心点都在正中间

这种情况下，Positon显示的数值是这个UI的LocalPosition，或者说它和AnchorPosition显示的是一样的

2）UI的锚点或轴心点不在中心

这个时候，在Position的位置上显示的实际是AnchorPosition

实际就是锚点所在的位置，因为Transform的position本身默认的原点就是物体的中心点，所以上一种情况下，UI的LocalPosition和AnchorPosition显示的数值是一样的

那么，在锚点不在中心的情况下，position的数值显示的就是anchorPosition

这个anchorPosition实际就是锚点位置和UI的轴心点的距离

例1：
选择左上方对齐的方式，AnchorPosition为（250，-250），那么image的左上角就刚好和Canvas的左上角重合


例2：
或者像下面这种情况，锚点是分开的，那么它的AnchorPosition就代表了锚点连线相交点的位置

当image的轴心点在这个相交点上时，它的AnchorPosition就为（0,0）

4.Pivot

（1）轴心点的显示

轴心点默认在UI的中心，但是它的位置也是可以改变的
在unity界面的左上角，有这样一个按钮

它是控制UI轴心点显示方式的按钮
Center（默认）
就是如图这样半透明的，这种情况下，它是不能用鼠标进行操作的，但是可以在RectTransform的Pivot中改变数值，只不过不会显示出来

Pivot
如图这样，它会变成不透明的，他可以同时被鼠标或RectTransform的Pivot属性调整

（2）轴心点的数值

它是RectTransform的最基本属性之一，数值范围是0到1的

（0,0）代表最下角

（1,1）代表右上角

之前我们说过，Position的值是锚点位置到轴心点的距离
例如：
这个image是在屏幕正中间的，Pivot是默认值（0.5,0.5）

这个时候，我们只改变它的Pivot的值为（0,0），我们并没有移动Image但是他的Position显示的值确实改变了

当我们改变Position的值为（0,0,0）的时候，就会发现，目前轴心点所在的左下角和锚点位置重合了

通过这种方式，我们可以广泛用于平时UI的对齐，可以有效降低我们的代码量，及UI复杂度

我会在我的公众号上推送新的博文，也可以帮大家解答问题
微信公众号 Andy and Unity 搜索名称或扫描二维码

希望我们能共同成长，共同进步