Unity3D-UGUI原理篇RectTransform 组件详解

Posted 2021-09-18 恬静的小魔龙

推荐阅读

• CSDN主页
• GitHub开源地址
• Unity3D插件分享
• 简书地址
• 我的个人博客
• QQ群：1040082875

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。

一、前言

这个系列文章，是为了记录分析UGUI的各种原理：

• UGUI的渲染模式。
• UGUI的缩放计算。
• UGUI的锚点定位。
• UGUI的层级渲染流程。
• UGUI的事件触发原理。
• UGUI的布局自动布局方式。

这是本系列文章的第三篇：
【Unity3D-UGUI原理篇】（一）Canvas 渲染模式
【Unity3D-UGUI原理篇】（二）Canvas Scaler 缩放原理
【Unity3D-UGUI原理篇】（三）RectTransform 组件详解
【Unity3D-UGUI原理篇】（四）Event System Manager 事件与触发
【Unity3D-UGUI原理篇】（五）Auto Layout 自动布局
【Unity3D-UGUI原理篇】（六）使用 UnityEngine.Events 让程序更灵活、稳定

二、RectTransform 组件简介

RectTransform 组件是UGUI对应的UI元素的基本组件，与游戏对象的基本组件Transform相似，RectTransform表示的是一个2D矩形的UI空间。

RectTransform定义了UI元素的位置、旋转、大小、锚点、指点等。

RectTransform组件的属性如下图所示：

PosX、PosY、PosZ对应的是这个UI元素的X、Y、Z的值。
Width、Height对应的是这个UI元素的宽和高。

三、RectTransform 组件Anchors（锚点）

下面就详细的说明Anchors锚点：

属性	介绍
Anchor Min	物体左下角对齐点，值（0,0）对应父物体中的左下角位置，值（1,1）对应父物体右下角位置
Anchor Max	物体右上角对齐点，值（0,0）对应父物体中的左下角位置，值（1,1）对应父物体右下角位置

UI的Anchors锚点，如果父物体也有 RectTransform ，子物体可以依据 Anchor 对齐到父物体，又分为 Min 与 Max 位置，如下图物体四周有4个三角形：

那么Anchor位置坐标的值的关系是什么呢？

当Canvas 下有1张图 Anchor Min 与 Anchor Max 皆为 (0.5 , 0.5)，如下左图部分。

如果将Anchor Min调整为(0.3, 0.5) ，Anchor Max调整为 (0.5, 0.7)，如下右图部分。

注意看 左图 Pos X、Pos Y、Width、Height ，会改变为 右图 Left、Top、Right、Buttom。

因为当 Anchor 在同一点时，显示的是UI的坐标和大小，当 Anchor 不在同一点时，显示的是UI的 Anchor 矩形填充空间，如下图所示：

上面看完一定还是不了解怎麽运作，让我们来透过实例了解一下。

Canvas 下有5张图，Anchor Min 与 Anchor Max 皆为 (0.5 , 0.5)，物体的位置会对齐到父物体的中心，当父物体大小改变时，情形如下：

Canvas 下有1张图，Anchor Min 与 Anchor Max 皆为 (0.0, 1.0)，物体的位置会对齐到父物体的左上角，当父物体大小改变时，情形如下，物体会固定在左上角：

Canvas 下有1张图，Anchor Min 为 (0.0, 0.0)， Anchor Max 为 (1.0, 0.0)，物体的位置会对齐到父物体的左下角与右下角，当父物体大小改变时，情形如下，物体宽度会随著父物体改变：

由上面的几个实例可以知道，子物体会依据所设定 Anchor 对齐到父物体，当父物体大小改变时，透过 Anchor 更新子物体。

上面有提到当我们点选4个三角形调整Anchor时，会出现比例信息，此比例就是子物体在父物体中的缩放比例，比如：

父UI大小（400,350）
子UI大小（120,105）
子UI的Anchor Min为（0.2,0.5）,Anchor Max为（0.5,0.8）

然后将父UI的大小调整为一半：（200,175）

子UI的Anchor Min 、 Anchor Max不变，大小变为：（60,62.5）

子UI的宽度=400 X 50% X 30% = 60
子UI的高度=350 X 50% X 30% = 52.5

所以我们可以得知父物体在缩小2倍后，父物体透过子物体的 Anchor 比例更新子物体，通过这种方式可以达到不同屏幕分辨率下自动改变UI大小与位置。

四、RectTransform组件的Anchor Presets

点选 RectTransform 左上角，可以开启Anchor Presets 工具：

这个Anchor Presets 工具列举了常用的定位方式，比如：

靠上横向拉伸、靠中横向拉伸、靠下横向拉伸。

按住Shift 可以连同 Pivot 一起改变，按住 Alt 可以连同位置一起改变。

五、RectTransform组件的Pivot（指点）

物体自身的支点，影响物体的旋转、缩放、位置，改变 UI Pivot 必须先开启控制面板的 Pivot 按钮，如下图：

接下来演示在不同的Pivot值下，UI的缩放旋转情况。

在Pivot模式下，设置Pivot的值为（0.5,0.5）：

然后改变UI的大小旋转：

接着设置Pivot的值为（0,1）：

然后改变UI的大小旋转：

六、RectTransform组件的蓝图和原始编辑模式

红框标注的地方，左边的按钮是Blue Print Mode(蓝图模式) ，右边的按钮是 Raw Edit Mode(原始编辑模式)。

Blue Print Mode(蓝图模式)

忽略了物体的 Local Rotation 和 Local Scale，方便以原来的旋转与大小调整物体：

Raw Edit Mode (原始编辑模式)

在 Inspector 中调整 Pivot 和 Anchor 时，物体会维持目前的位置与大小(Inspector 中数值部分)，调整情形如下，请注意数值部分。

Inspector 中调整 Pivot：

Inspector 中调整 Anchor：