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 搜索名称或扫描二维码
希望我们能共同成长,共同进步