UGUI——RectTransform详解

article/2025/10/6 11:54:27

什么是RectTransform

创建一个UGUI控件时,查看其Inspector面板,原先熟悉的Transform已经被替换成RectTransform,面板也与原先的Transform的面板相去甚远。

这里写图片描述

先看看Unity官方对RectTransform的描述:

Position, size, anchor and pivot information for a rectangle.
RectTransforms are used for GUI but can also be used for other things. It’s used to store and manipulate the position, size, and anchoring of a rectangle and supports various forms of scaling based on a parent RectTransform.

从官方的描述可以看见RectTransform主要提供一个矩形的位置、尺寸、锚点和中心信息以及操作这些属性的方法,同时提供多种基于父级RectTransform的缩放形式。RectTransform用于但不限于GUI,至于GUI以外RectTransform还能怎么用,不在本篇文章的讨论范围内。

相较于Transform,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轴位置和高度。

这里写图片描述

也就是说,在仅左右拉伸的情况下,子RectTransform的左边和右边会分别与其左右两个Anchor保持Left和Right的距离;相对于两个Anchor连线的竖直偏移由PosY确定;自身的高度由Height确定。

明白了这种Anchor的设置,其他两种情况也就类似了。读者可以自行尝试。

在仅上下拉伸的情况下,子RectTransform的上边和下边会分别与其上下两个Anchor保持Top和Bottom的距离;相对于两个Anchor连线的水平偏移由PosX确定;自身的宽度由Width确定。

在上下左右均拉伸的情况下,子RectTransform的上下左右会分别与其上下左右四个Anchor保持Top、Bottom、Left和Right的距离;其位置和尺寸完全由父RectTransform控制。

position、localPosition、anchoredPosition和anchoredPosition3D属性

Transform有positionlocalPosition属性,这两个分别代表在世界空间的绝对位置和相对于父级物体的相对位置。RectTransform引入了anchoredPositionanchoredPosition3D,它们都是相对位置,但是相对的是自身的Anchor。

当锚点全部重合时,anchoredPosition代表的就是自身Pivot到Anchor的向量。

这里写图片描述

这里写图片描述

anchoredPositionanchoredPositoin3D都可以认为是以像素为单位。

关于RectTransform的positionlocalPosition,它们的值根其所属的Canvas的渲染模式有关。

在Screen Space——Overlay的模式下,由于Canvas的世界尺寸与其像素尺寸在数值上相等,因此其rectTransformposition与其在屏幕空间的坐标在数值上也相等。这种模式下,要获取某个RectTransform的屏幕坐标,直接使用position就可以。

在Screen Space——Camera的模式和World Space下,RectTransform的渲染与摄像机有关,在获取其屏幕坐标时,需要利用canvas.worldCamera,或者transform.TransformPoint等坐标转换函数进行坐标转换。

offsetMax和OffsetMin属性

先看看官方的说明:

offsetMax The offset of the upper right corner of the rectangle relative to the upper right anchor.
offsetMin The offset of the lower left corner of the rectangle relative to the lower left anchor.

意思很明确了,offsetMax是RectTransform右上角相对于右上Anchor的距离;offsetMin是RectTransform左下角相对于左下Anchor的距离。

这个值在使用代码控制RectTransform时很有用,比如在制作UI时,其中有个RectTransform采用的是“绝对定位”,运行时需要用代码来将其设置为全拉伸,那么对该RectTransform执行如下操作就可以实现:

	rectTransform.anchorMin = Vector2.zero;rectTransform.anchorMax = Vector2.one;rectTransform.offsetMin = Vector2.zero;rectTransform.offsetMax = Vector2.zero;

offset可以认为是以像素为单位。

sizeDelta属性

sizeDelta是个由引擎计算出来的值,这个值很容易被错误地使用。要正确地使用sizeDelta,就要先理解它是怎么算出来的。

The size of this RectTransform relative to the distances between the anchors.
If the anchors are together, sizeDelta is the same as size. If the anchors are in each of the four corners of the parent, the sizeDelta is how much bigger or smaller the rectangle is compared to its parent.

sizeDeltaoffsetMax-offsetMin的结果。在锚点全部重合的情况下,它的值就是面板上的(Width,Height)。在锚点完全不重合的情况下,它是相对于父矩形的尺寸。

一个常见的错误是,当RectTransform的锚点并非全部重合时,使用sizeDelta作为这个RectTransform的尺寸。此时拿到的结果一般来说并非预期的结果。

sizeDelta可以认为以像素为单位。

rect属性

如果想要获取一个RectTransform的矩形信息,应该使用rectTransform.rect属性。

rect属性同样是一个计算出来的值,但是它表示的是该rectTransform对应的矩形的相关信息。其中前两个参数分别代表矩形左下角相对于锚点的x和y坐标,后两个参数分别代表矩形的宽度和高度。

rect可以认为是以像素为单位。

RectTransformUtility

RectTransformUtility是原生的RectTransform工具,它提供了多个静态函数来对RectTransform进行操作,如坐标转换、范围测试等等。这里不再展开了。


http://chatgpt.dhexx.cn/article/PkH3tLWx.shtml

相关文章

【Unity3D】UGUI之Button

1 Button属性面板 在 Hierarchy 窗口右键,选择 UI 列表里的 Button 控件,即可创建 Button 控件,选中创建的 Button 控件,按键盘【T】键,可以调整 Button 控件的大小和位置。创建 Button 控件时,系统会自动给…

UGUI基础

UGUI基础 ##1、UGUI概述 1.1、Unity界面发展史 【老版本界面onGUI】>【GUI插件NGUI】>【新版本界面UGUI】 1.2、UGUI特点 新的UI系统是从Unity4.6开始被集成到Unity编译器中的。Unity官方给这个新的UI系统赋予的标签是:灵活,快速和可视化。 对…

【Unity基础】ugui的案例篇(个人学习)

文章目录 前言案例1、点击游戏物体改变一次颜色,被UI遮挡的情况下点击无效1.动态图演示2.实现方式I.实现方案1 通过射线检测实现 3.源码演示Lua部分代码CSharp部分代码 案例2、圆形图片的制作1.图演示2.实现方式I.实现方案1 使用Mask组件实现II.实现方案2 通过重写G…

Unity UGUI源码解析

前言 这篇文章想写的目的也是因为我面试遇到了面试官问我关于UGUI原理性的问题,虽然我看过,但是并没有整理出完整的知识框架,导致描述的时候可能自己都是不清不楚的。自己说不清楚的东西,别人就等于你不会。每当学完一个东西的时…

UGUI基础学习

目录 TEXT IMAGE ROWIMAGE TEXT fontsize:字体 color:字体颜色 ;inespacing:字行间隔 代码展示: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class TEXTtest : MonoBehaviour {p…

UGUI源码解析——总览

一:图像相关 ——UIBehaviour:UI组件的基类,继承MonoBehaviourUGUI源码解析——UIBehaviour——CanvasUpdateRegistry:图像、布局重建注册器UGUI源码解析——CanvasUpdateRegistry——ICanvasElement:图像、布局重建接…

UGUI 全方位了解

随着 unity3d 4.6 ~ 5.x 新 UI 系统终于与大家见面了。这篇文章将不会介绍如何使用按钮、滚动条之类的UI控件,这些内容可以参考 Unity Manual;这篇文章的重点是,如何理解 UI 系统的设计,以便更好的在实际中使用它。 RectTransfor…

UI框架(UGUI)

整个游戏的工程源码下载链接:点击打开链接 可以参考的写的Demo和本文章来学习 毕竟有些细节问题在文章中不能一一说到 工具:VS2010、Unity5.2.3f 先介绍整个Demo的主面板 其中任务、技能、符文等等都是按钮,点击按钮会生成相应面板 【Pro…

UGUI相关使用

UGUI 文章目录 UGUI1.六大基础组件概述1.1 Canvas组件1.2 CanvasScaler组件1.3 Graphic Raycaster组件1.4 Event System组件1.5 Standalone Input Module组件1.6 RectTransform组件 2.三大基础控件概述2.1 图像控件Image2.2 文本控件Text2.3 RawImage原始图像组件 3.七大组合控…

Unity UGUI系统

UI系统对比 对 UI 系统的选择取决于是为 Unity 编辑器开发 UI,还是为游戏或应用程序开发运行时 UI。 UI 的类型UI 工具包Unity UI(uGUI)IMGUI注意事项运行时(调试)✔ *✔✔这指用于调试用途的临时运行时 UI。运行时(游戏内&…

UGUI 详解

1.RectTransform RectTransform组件 继承自Transform组件,是2D界面中元素的Transform。 对比Transform增加了新的属性分别是:Anchor(锚点)和 Pivot(轴心点)。 属性: localPosition:图…

UGUI学习笔记(八)UGUI不规则响应区域

一、Unity自带的点击策略 在上一篇文章中我们了解到,UI的默认响应区域是UI元素所在的矩形框线内的区域。这也就意味着,当UI的图形为不规则形状时,点击图形的外部也可能会触发事件。 但其实Unity自带了一种不规则区域点击策略。要想使用它&…

[Unity UGUI图集系统]浅谈UGUI图集使用

**写在前面,下面是自己做Demo的时候一些记录吧,参考了很多网上分享的资源 一、打图集 1.准备好素材(建议最好是根据图集名称按文件夹分开) 2、创建一个SpriteAtlas 3、将素材添加到图集中 4、生成图集 到此,我们的图…

Ngui和Ugui的区别

NGUI的元素更新: UIPanel.LateUpdate采用轮询的方式,每帧都会执行,并且每帧都会有UIPanel.UpdateWidgets这个函数的调用,做的事情就是对这些UI元素的位置、缩放等信息的获取,也就是即使没有变化的UI元素,也…

Unity—UGUI

每日一句:读数、学习 去更远的地方,才能摆脱那些你不屑一顾的圈子 目录 InputFiled输入框 例:用户名和密码 Toggle组件 案例:冷却效果 InputFiled输入框 Text Component 输入文本组件 Text输入内容 Character Limit 输入字符…

【Unity3D】UGUI概述

1 UGUI 与 GUI 区别 GUI控件 在编译时不能可视化,并且界面不太美观,在实际应用中使用的较少。UGUI 在编译时可视化,界面美观,实际应用较广泛。 2 Canvas 渲染模式(Render Mode) Screen Space - Overlay&a…

怎样使用UGUI

什么是 UGUI UGUI 是 Unity 自带的一套 GUI 系统,含有基本的一些 UI 控件。 UGUI 控件有哪些? 我们常用的有 Canvas,Text,Image,Button,Toggle,Slider,Scroll Bar,Scroll…

Unity3D UGUI系列之合批

目录 1. 什么是UGUI的合批1.1 准备工作1.2 批处理1.3 批处理的意义1.4 UGUI的合批 2 分析工具的使用2.1 Frame Debugger的使用2.2 Profiler-UI的使用 3 UGUI合批规则3.1 UGUI合批初体验3.2 UGUI合批被打断初体验3.3 UGUI合批规则详解3.3.1 合批规则3.3.2 合批规则示例13.3.3 合…

unity中NGUI与UGUI的区别?

什么是UI? UI即User Interface(用户界面)的简称。泛指用户的操作界面,UI设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得…

【UGUI】UGUI入门,系统介绍

Unity 2017.1.0f3 常用的UI控件 添加UI控件 创建UI控件时,如果没有Canvas和EventSystem系统会自动创建。 Canvas是画布,是所有UI控件的根类,所有UI控件都必须在Canvas上绘制。如果UI控件不在Canvas下,将无法正常渲染显示。 Eve…