Unity3d中UGUI组件精简复盘（一）RectTransform组件

已于 2023-06-20 22:16:11 修改
阅读量825 收藏 6
点赞数 2
分类专栏： Unity UGUI 文章标签： unity3d ugui
于 2021-06-06 04:05:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43801020/article/details/117531184
版权

话不多说，我们直接进入正题~ 今天我们需要了解的组件便是我们在Unity开发中必不可少的组件啦，RectTransform组件啦~


在Unity3D中的组件布局是这样的：

RectTransform组件

在这里插入图片描述

Center模式下，UI部分的轴心点置灰，导致我们无法选中轴心点进行拖动

Pivot模式下，UI部分的轴心点恢复原亮，我们可选中轴心点进行拖动

自定义锚点，子物体可以设置成根据父物体的变化相对变化的效果

在这里插入图片描述

蓝色矩形边长为200，计算红色一点的Anchors的位置是什么？

AnchorsPosition为（0，-100）

Pivot

如果X位置变化，想要Image只向右边的拓展，则将Piovt设置为（0,0.5）

如果y位置都变化，想要Image只向上边扩展，则将Piovt设置为(0.5，1)

如果y位置都变化，想要Image只向下边扩展，则将Piovt设置为(0.5，0)

如果X，y位置都变化，想要Image向四周扩展，则将Piovt设置为(0.5，0.5)

在这里插入图片描述

获取UI宽高的最安全的方式

如何获取到Image组件的宽高？

在这里插入图片描述

size DeltaX = -(Left+Rigth)

size DeltaY = -(Top+Buttom)

蓝图模式和原始编辑模式

在这里插入图片描述

虚线框：蓝图模式

R：原始编辑模式

非蓝图和非编辑模式下，边框会随着Image的旋转缩放变化而变化，边框始终包含渲染图。Anchors的Min、Max值变化只操作锚点位置。操作Pivot的X、Y值的同时，image不会随之运动

蓝图模式下，边框不会随着Image的旋转、缩放而变化，应用在界面的动画的情况下。

原始编辑模式下，Anchors的Min、Max值变化的同时，image的边框也会随之变化。操作Pivot的X、Y值的同时，image会随之运动


以上呢，便是我对Rectransform组件作出的简要的描述，希望能够对你有所帮助~ 也希望你能够点赞、评论吖~ 你们的点赞、评论就是我前进的动力！


公众号：平平无奇代码猴
也可以搜索：Jackiie_wang 公众号，欢迎大家关注！欢迎催更！留言！

公众号二维码

作者：ProMer_Wang

链接：https://blog.csdn.net/qq_43801020/article/details/117531184

本文为ProMer_Wang的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！

ProMer_Wang
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Unity3D树组件UGUI Tree
03-24
直接从Json数组生成树并关联数据，代码简单，操作方便。
Unity3D——UGUI页面排版之RectTransform介绍
weixin_34293059的博客
07-19 261
RectTransform属性界面展示： 一、设置x轴相对位置 表示x坐标分别是相对父容器左边、中间、右边计算。 例子如下：操作的对象是“前往”按钮，灰色覆盖到的地方是它父容器的大小。（y轴为middle） left: center: right: 二、设置y轴相对位置 表示y坐标分别是相对父容器顶部、中间、底部计算。 同一个例子：（x轴为center） top: middl...
Unity3D中的Rect Transform总结
十豆三展的博客
12-11 3531
Unity3D中的Rect Transform总结：Unity3D专门为UI组件设计的Rect Transform组件。Rect Transform和Canvas Renderer是UI控件必须携带的组件。位置是以像素为单位，其具体的值则以锚点所在的位置为基准，表示与锚点的距离。1、重点学习参考两个学习文档：感谢这两篇作者的技术文档，无私奉献，高风亮节。（1）Unity3D之UGUI学习笔记（二）...
unity3d Rect Transform解析/解释
cention168的专栏
01-18 2844
坐标（0，0）时图片中心点与窗口右下角对齐，如图目前选择了预制的右下角对齐方式，则图片的右边对齐了界面的右边，无论怎么移动都紧贴，至于Y坐标的设置，则使图片的下边高于（129-112/2）像素，而如果canvas设置了UI缩放，则无论怎么缩放窗口，都使得图片贴近右下角，并且大小同时等比例缩放。 ...
unity Rect Transform学习笔记
weixin_42116703的博客
01-20 950
Anchor 值范围 锚点取值在[0,1]之间，是一个比例值，这个比例值，是以父节点的width，和height来进行比例计算的，比如其值为1的话，是指父节点Rect的width的最远点，或是height的最高点 privot Pivot 轴心点 想要调节 必须要 屏幕自适应问题 第1种情况：两个锚点重合时 不管我们怎么拖动黑框，改变他大小和位置，红框的Pivot点到Anchor点的距...
【Unity学习笔记】Rect Transform组件
一白梦人的博客
06-03 1342
声明：此篇文章是个人学习笔记，并非教程，所以内容可能不够严谨。可作参考，但不保证绝对正确。如果你发现我的文章有什么错误，非常欢迎指正，谢谢哦 Rect Transform官方文档：https://docs.unity3d.com/cn/current/Manual/class-RectTransform.html Rect Transform Rect Transform组件是在UGUI中包含表示UI元素的位置和大小相关信息的组件，如果其父项也有Rect Transform组件，那么还可以指定其相对父项的大
Unity3D RectTransform中文教程详细用法分析
ChinarCSDN的博客
01-31 3006
Chinar blog ：www.chinar.xin TexturePacker 本文提供全流程，中文翻译。 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能 Chinar —— 心分享、心创新！助力快速理解 Unity UGUI RectTransform 组件用法详解为新手节省宝贵的时间，避免采坑！ Chinar 教程效果： 文章目录...
Unity3D中uGUI事件系统简述及使用方法总结.pdf
01-16
Unity3D中uGUI事件系统简述及使用方法总结.pdf Unity3D中uGUI事件系统简述及使用方法总结.pdf Unity3D中uGUI事件系统简述及使用方法总结.pdf Unity3D中uGUI事件系统简述及使用方法总结.pdf Unity3D中uGUI事件...
Unity3D基于UGUI实现虚拟摇杆
08-19
主要为大家详细介绍了Unity3D基于UGUI实现虚拟摇杆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unity3d C# UGUI实现自动循环滚动的列表（ScrollRect）的功能源码
10-17
Unity3d C# UGUI实现自动循环滚动的列表（ScrollRect）的功能源码 建议看说明：https://blog.csdn.net/qq_33789001/article/details/120813324
Unity3D使用UGUI开发原生虚拟摇杆
08-19
主要为大家详细介绍了Unity3D使用UGUI开发原生虚拟摇杆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unity3d Rect Transform的解析
SuperFierceBigKK的博客
04-02 351
转载https://blog.csdn.net/whshiyun/article/details/78578404的博客，写的很详细
Unity之UGUI的学习（二）：Rect Transform（矩形变换）
weixin_39520967的博客
07-10 2389
什么是Rect Transform？ Rect Transform（矩形变换）是一种有别于原有的Transform组件的新的变换组件。在原来的场景中Transform组件表示的是一个点，而Rect Transform表示的是一个矩形。Rect Transform不仅拥有位置，旋转和缩放，还拥有高度和宽度，并且还有锚点和轴心点属性。 1.Anchors（锚点） 锚点在Scene视图一四个三角形手柄显示，它的信息在Inspector视图中显示。 官网上有这样的描述。 矩形变换有一个锚点的布局概念，如果一个
Unity UGUI 之Rect Transform（一）
weixin_45635438的博客
08-02 1201
敝人最近刚刚学到Unity的UGUI，横在面前的第一座大山就是每个控件必备的Rect Transform组件。因此在此总结整理下自己对它的理解，侧重点是对它实现原理的理解。 为了统一说法，下面对三维空间中的gameObject称为“物体”；UI层面的gameObject称为“控件”；控件挂载的脚本称为“组件”；说明父子关系时，把子控件称为“元素”； 1. 为什么用Rect Transform，而不用Transform了呢？ 因为Transform里只有物体的位置信息，没有大小信息。不是说Unity
Unity 十五 UGUI RectTransform 脚本控制
u014196765的博客
06-30 1430
在Unity里可以 Transform 控制3d 物体的移动缩放旋转，那么在 Canvas 里如何设置 transform 呢，可以用 RectTransform，它继承于 Transform。 // RectTransform a = this.transform.GetComponent<RectTransform>();//通过获取组件，获取 RectTransfo...
Unity中改变RectTransform的localPosition值从而实现页面切换效果
Game Kingdom的博客
01-09 852
首先在Unity中新建一个脚本SliderScrollView，把这个脚本绑定在拥有ScrollView组件的游戏物体上面。然后复制以下的代码： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using System; using DG.Tweening; /// <summary&
Unity3D的UGUI——Canvas之美
游戏开发、游戏引擎开发、逆向破解爱好者
08-21 4577
Canvas 一句话概括Canvas就是渲染 UI 的组件，UGUI是Unity新支持的2D界面控件，所有的UI控件都需要在包含Canvas组件的物体下边充当子物体，我们可以在GameObject->UI下创建物体时，会自动生成Canvas以及与其对应的EventSystem控件。 Canvas主要包含以下部分：Canvas、Canvas Scaller、Graphic ...
Unity——UGUI
m0_51743362的博客
03-27 1978
Mask组件 配合Image组件使用 参数：没有子物体能显示时，是否显示父物体本图 带有Mask组件的图，会显示子物体图片中，父物体图片Alpha通道不为0的部分 Scroll组件 滚动模式： 无边界自由滚动 有边界带弹回效果（回弹系数） 有边界无回弹效果 拖拽惯性 ...
Unity 一款漂亮好用的UGUI插件！
Jacob
05-25 2861
Unity — 一款漂亮使用的UGUI插件！一：效果图二：太多效果图，自己下载看吧，总有你要的 -_-三：加油！至明天的自己！ 本文提供详细教程记录遇到的难点并帮助同行的朋友们坚持以最简单的方法传授和把更好的阅读体验带给你们！ 一：效果图 二：太多效果图，自己下载看吧，总有你要的 -_- 网盘资源一键下载 (点点关注，不迷路！谢谢支持！！) 提取码：2sez 三：加油！至明天的自己！ 拥有自己的服务器让开发工作不再难 My
unity3d 的ugui如何实现一个item列表？
最新发布
05-24
实现一个item列表可以通过 Unity3D 中的UGUI组件来完成，以下是一个简单的实现步骤： 1. 创建一个ScrollView对象，它会成为你的item列表的容器。 2. 在ScrollView对象下创建一个Content对象，用于放置所有的item。 3. 创建一个item的Prefab，包含你需要显示的元素。 4. 在运行时，动态生成多个item对象，将它们放置在Content对象下，以此来构建item列表。 5. 根据需要，可以对item列表进行滚动、添加或删除item等操作。 具体实现可以参考以下步骤： 1. 创建ScrollView和Content对象 在场景中创建一个空对象，命名为ScrollView。将Canvas组件的Render Mode设置为Screen Space - Overlay，然后将ScrollView对象的RectTransform组件的Anchors和Pivot都设置为(0, 0)。这样，ScrollView对象的左下角就会位于屏幕左下角。在ScrollView对象下创建一个空对象，命名为Content。将Content对象的RectTransform组件的Anchors和Pivot也都设置为(0, 0)，以便于它能够与ScrollView对象的位置重合。 2. 创建item的Prefab 在项目资源中创建一个新的Prefab，将你需要显示的元素放入其中。例如，可以在Prefab中添加一个Text对象，用于显示item的标题。确保这个Prefab的RectTransform组件的Anchors和Pivot都设置为(0, 0)，以便于在生成item时它们能够正确地布局。 3. 动态生成item对象 在脚本中，使用Instantiate()方法动态生成多个item对象，并将它们作为Content对象的子对象。例如： ```csharp public GameObject itemPrefab; public int itemCount = 20; void Start() { for (int i = 0; i < itemCount; i++) { GameObject item = Instantiate(itemPrefab, content.transform); // 设置item的位置和大小 item.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, -i * item.GetComponent<RectTransform>().rect.height); } } ``` 这段代码会生成20个item对象，将它们放置在Content对象下，并设置它们的位置和大小。这里假设item的高度是固定的。 4. 对item列表进行滚动 为了让item列表能够滚动，需要将ScrollView对象下的Scrollbar组件与Content对象的RectTransform组件相绑定。在ScrollView对象下添加一个Scrollbar组件，将它的Direction设置为Vertical，并将它的Size设置为0.2（或根据需要调整）。然后将Scrollbar组件的Value属性绑定到Content对象的RectTransform组件的anchoredPosition.y属性上。这样，当拖动Scrollbar时，Content对象就会相应地向上或向下滚动。 5. 添加或删除item 如果需要动态地添加或删除item，可以在脚本中使用Instantiate()和Destroy()方法来完成。例如： ```csharp public void AddItem() { GameObject item = Instantiate(itemPrefab, content.transform); // 设置新的item的位置和大小 item.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, -itemCount * item.GetComponent<RectTransform>().rect.height); itemCount++; } public void RemoveItem() { if (itemCount > 0) { Destroy(content.transform.GetChild(itemCount - 1).gameObject); itemCount--; } } ``` 这样，就可以在运行时动态地添加或删除item了。当添加一个新的item时，只需生成一个新的GameObject，并将它放置在Content对象下；当删除一个item时，只需销毁Content对象下的最后一个子对象即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值