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

时间:2024-04-05 10:42:22

前言

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

1.组件属性的显示模式

点击下图中的红框内的图标,会出现这样一个菜单
UGUI系列——RectTransform之锚点及轴心点深入解析
Normal :就是组件默认的显示模式
Debug :这种模式下,会显示出很多其他的属性

2.AnchorPosition

在组件的debug模式下,可看到这个属性
UGUI系列——RectTransform之锚点及轴心点深入解析
它代表的就是锚点的位置

锚点位置分两种情况理解:
1)四个锚点是在一起的

UGUI系列——RectTransform之锚点及轴心点深入解析
这种情况下,AnchorPosition很明显就是它们的交点

2)四个锚点是分开的

UGUI系列——RectTransform之锚点及轴心点深入解析
这种情况下,AnchorPosition就代表的是他们连接线交点的位置

3.Position的显示

RectTransform是Transform的子类,所以它最基础的属性就是Position,Rotation和Scale
UGUI系列——RectTransform之锚点及轴心点深入解析
但是在UI里,它position的Z值并没有意义,它的UI遮盖关系是由渲染层级控制的,并不是这个值

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

这里分几种情况

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

UGUI系列——RectTransform之锚点及轴心点深入解析
这种情况下,Positon显示的数值是这个UI的LocalPosition,或者说它和AnchorPosition显示的是一样的

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

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

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

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

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

例如:
选择左上方对齐的方式,AnchorPosition为(250,-250),那么image的左上角就刚好和Canvas的左上角重合
UGUI系列——RectTransform之锚点及轴心点深入解析
UGUI系列——RectTransform之锚点及轴心点深入解析
或者像下面这种情况,锚点是分开的,那么它的AnchorPosition就代表了锚点连线相交点的位置
UGUI系列——RectTransform之锚点及轴心点深入解析
当image的轴心点在这个相交点上时,它的AnchorPosition就为(0,0)
UGUI系列——RectTransform之锚点及轴心点深入解析
我会在我的公众号上推送新的博文,也可以帮大家解答问题
微信公众号 Andy and Unity 搜索名称或扫描二维码
UGUI系列——RectTransform之锚点及轴心点深入解析
希望我们能共同成长,共同进步