什么是RectTransform
创建⼀个UGUI控件时,查看其Inspector⾯板,原先熟悉的Transform已经被替换成RectTransform,⾯板也与原先的Transform的⾯板相去甚远。
先看看Unity官⽅对RectTransform的描述:
Position, size, anchor and pivot information for a rectangle.
RectTransforms are ud for GUI but can also be ud for other things. It’s ud to
store and manipulate the position, size, and anchoring of a rectangle and supports
various forms of scaling bad on a parent RectTransform.
从官⽅的描述可以看见RectTransform主要提供⼀个矩形的位置、尺⼨、锚点和中⼼信息以及操作这些属性的⽅法,同时提供多种基于⽗级RectTransform的缩放形式。RectTransform⽤于但不限于GUI,⾄于GUI以外RectTransform还能怎么⽤,不在本篇⽂章的讨论范围内。
相较于RectTransform,RectTransform提供了更强⼤的功能来对矩形进⾏操作,这主要归功于新增加的两个概念:Anchor(锚点)和Pivot(中⼼)。
Anchor(锚点)
锚点(四个)由两个Vector2的向量确定,这两个向量确定两个点,归⼀化坐标分别是Min和Max,再由这两个点确定⼀个矩形,这个矩形的四个顶点就是锚点。
在Hierarchy下新建⼀个Image,查看其Inspector。
在Min的x、y值分别⼩于Max的x、y值时,Min确定矩形左下⾓的归⼀化坐标,Max确定矩形右上⾓的归⼀化坐标。刚创建的Image,其Anchor的默认值为Min(0.5,0.5)和
Max(0.5,0.5)。也就是说,Min和Max重合了,四个锚点合并成⼀点。锚点在Scene中的表⽰如下:
为了看得更清晰,将图⽚颜⾊改为⿊⾊,将Min和Max的值分别改为(0.4,0.4)和
(0.5,0.5)。可以看见四个锚点已经分开了。
Unity提供了⼏个预置的Anchor设置,可以快速地设置。
注意到Inspector中Anchor上⽅的属性,会随着我们选择的Anchor的⽽变化。因为在不同的Anchor设置下,控制该RectTransform的变量是不同的。
⽐如设置成全部居中(默认)时,属性⾥包含熟悉的⽤来描述位置的PosX、PosY和PosZ,以及⽤来描述尺⼨的Width和Height;切换成全部拉伸时,属性就变成了Left、Top、Right、Bottom和PosZ,前四个属性⽤来描述该RectTransform分别离⽗级各边的距离,PosZ⽤来描述该RectTransform在世界空间的Z坐标(事实上没什么⽤,它的值不会影响它被渲染的优先程度)。
Pivot(中⼼)
Pivot⽤来指⽰⼀个RectTransform(或者说是矩形)的中⼼点。矩形左下⾓为(0,0),右上⾓为(1,1)。Pivot为(0,0)时,即与矩形左下⾓重合。默认状态下,Pivot为
(0.5,0.5),即Pivot在矩形中⼼。
上图红框中蓝⾊圆圈表⽰的就是Pivot。如果⽆法看见,需要在⼯具栏中选择Transform Tools的最后⼀个选项,或者使⽤快捷键T。
可以通过直接在Scene视图中拖动Pivot来调整锚点位置,也可以在Inspector中直接输⼊Pivot的两个值以得到精确的位置。当对RectTransform进⾏定位、旋转和缩放操作时,都将以Pivot为参考点进⾏。
Anchor和Pivot共同作⽤
⼦级RectTransform的在⽗级RectTransfrom中的定位是由⼦级Anchor和Pivot共同作⽤完成的。为了⽅便演⽰,这⾥将原先的Image的Width和Height分别设置成400和300,并改名为ImageParent,然后将它的Anchor设置成预设的左下。再创建⼀个Image,将颜⾊设置成绿⾊,并改名为ImageChild。最后把ImageChild设置成ImageParent的⼦物体。
现在两个物体看起来如下:
现在ImageChild的Anchor重合成⼀点,并且居于ImageParent的正中⼼。拖动ImageChild,让它相对于Anchor有⼀定的偏移,然后选中ImageParent,更改其位置和⼤⼩,观察变化:
可以发现,ImageChild将保持与Anchor的相对位置不变,其尺⼨不会发⽣变化。
在Anchor重合成⼀点的情况下,我习惯将它称之为“绝对定位”(事实上它依旧是相对的,相对于⽗级RectTransform。⽐如某些情况,Canvas确定了,某个RectTransfrom直接挂在Canvas 下,那它的定位就是相对于⼀个固定的RectTransform,也就可以被看作绝对定位了)。
回过来看看ImageChild的Inspector⾯板,确定其位置和尺⼨的属性如下:
也就是说,在锚点全部重合的情况下,PosX、PosY和PosZ确定了它的Pivot相对于Anchor的位置,Width和Height确定了它的尺⼨。
四个锚点重合这种情况是⽐较好理解的,再看看Anchor两两重合的情况。
将ImageChild的Anchor修改为居中左右拉伸,如图:
RectTransform的定位属性由原先的PosX改为Left、原先的Width改为Right。并且我们可以通过点击这些属性看到Scene视图中这些值的可视化显⽰。
由于我们现在设置的Anchor是左右拉伸,因此,在改变ImageParent的尺⼨时,ImageChild的横向尺
⼨将根据需要进⾏拉伸或压缩,但是在竖向上,ImageChild依旧依靠PosY和Height来指定它的Y轴位置和⾼度。