Unity RectTransform 组件

news2025/8/9 21:00:48

文章目录

  • 1.RectTransform 介绍
  • 2.Anchor 锚点
  • 3.Pivot 轴心点
  • 4.RectTransform API 属性
    • 4.1 anchorMax、anchorMin —— 锚点矩形
    • 4.2 offsetMax、offsetMin —— 偏移量
    • 4.3 rect —— 矩形类
    • 4.4 sizeDelta —— UI坐标
    • 4.5 anchoredPosition —— UI坐标
  • 5.RectTransform API 方法
    • 5.1 SetSizeWithCurrentAnchors(Animations.Axis axis, float size)
    • 5.2 SetInsetAndSizeFromParentEdge (RectTransform.Edge edge, float inset, float size);
    • 5.3 GetWorldCorners (Vector3[] fourCornersArray) ----- 取得UI元素四个角的世界坐标
    • 5.4 GetLocalCorners (Vector3[] fourCornersArray) ----- 取得UI元素四个角的本地坐标
  • 6.常用方法
    • 6.1 获取UI宽高
    • 6.2 设置UI宽高
    • 6.3 设置布局方式

1.RectTransform 介绍

在这里插入图片描述

  1. RectTransform 继承自 Transform
  2. 相对于Transform,RectTransform增加了两个用于UI适配的属性,分别是:Anchor(锚点)Piont(轴心点)
  3. Transform,RectTransform,Rect
说明
Transform记录并表示,一个3D物体在 三维空间 中的 位置 、 旋转 和 缩放 三种属性
RectTransform记录并表示,一个2D UI元素 在屏幕中的位置、旋转、和缩放三种属性
Rect表示2D矩形,常用来处理表示2维矩形,设置x、y位置和宽度、高度。( 你可以理解为用来描述一个矩阵的长宽 )

2.Anchor 锚点

请添加图片描述
对锚点的不同设置,RectTransform会出现不同属性(左右属性不会同时出现)

Pos X (Anchors X 到 Pivot Y 的距离) —— Left
Pos Y (Anchors Y 到 Pivot Y 的距离) —— Top
Width (UI 元素宽度) —— Right
Height ( UI 元素高度) —— Bottom

1.当 UI 四个锚点都在一起时
在这里插入图片描述
2.当 X 方向锚点分开时
在这里插入图片描述
3.当 Y 方向锚点分开时
在这里插入图片描述
4.当 X Y 方向锚点都分开时
在这里插入图片描述

3.Pivot 轴心点

轴心点的不同,会造成UI的缩放/旋转效果不同,以及与父物体形成的 UI 适应问题

4.RectTransform API 属性

4.1 anchorMax、anchorMin —— 锚点矩形

Anchors的Min和Max分别是归一化的位置值(从0到1),表示占父RectTransform的百分比请添加图片描述

4.2 offsetMax、offsetMin —— 偏移量

offsetMax:
当前UI矩形右上角相对于锚点右上角的偏移(UI元素的右上角的坐标,减去右上角锚点的坐标)
offsetMin:
当前UI矩形左下角相对于锚点左下角的偏移(UI元素的左下角角的坐标,减去左下角锚点的坐标)
在这里插入图片描述

4.3 rect —— 矩形类

rect中的属性,不与UI元素所在的位置有关,只和其自身属性相关
rect.width,rect.height:
UI元素的宽高
rect.x,rect.y:
矩形左下角相对于中心点的x和y坐标

4.4 sizeDelta —— UI坐标

sizeDelta是offsetMax-offsetMin的结果。

  1. 锚点情况下的sizeDelta
    在这里插入图片描述
    此时,设置sizeDelta的X,Y值,可以直接调整UI元素的大小
  2. 锚框情况下的sizeDelta
    sizeDelta.x:
    锚框的宽度与UI元素的宽度的差值
    sizeDelta.y:
    锚框的的高度与UI元素的高度的差值
    在这里插入图片描述

4.5 anchoredPosition —— UI坐标

  1. 锚点情况
    anchoredPosition UI元素Pivot到Anchor的距离
    在这里插入图片描述2.
  2. 锚框情况
    anchoredPosition UI元素Pivot到锚框中心点的距离
    请添加图片描述

5.RectTransform API 方法

5.1 SetSizeWithCurrentAnchors(Animations.Axis axis, float size)

这个方法无论在绝对布局还是相对布局的情况下,都可以通过直接设置rect中的width和height值来改变UI元素的大小。

rectTransform = GetComponent<RectTransform>();
rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 100);	// 宽度
rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 100);    	// 高度

5.2 SetInsetAndSizeFromParentEdge (RectTransform.Edge edge, float inset, float size);

根据父物体的 Edge(某一边)去布局
参数:

  1. 确定基准的边RectTransform.Edge.Top(Bottom, Left, Right)
  2. UI元素的该边界与父物体该边界的距离
  3. 设定选定轴上UI元素的大小

注意:使用次方法会改变UI的锚点

  • 以左边界为基准时,anchorMin 和 anchorMax 的y不变x变为0.
  • 以右边界为基准时,anchorMin 和 anchorMax 的y不变x变为1.
  • 以上边界为基准时,anchorMin 和 anchorMax 的x不变y变为1.
  • 以下边界为基准时,anchorMin 和 anchorMax 的x不变y变为0.

例:

 rectTran.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 100, 200);

在这里插入图片描述

5.3 GetWorldCorners (Vector3[] fourCornersArray) ----- 取得UI元素四个角的世界坐标

顺序为:左下 -> 左上 -> 右上 -> 右下

5.4 GetLocalCorners (Vector3[] fourCornersArray) ----- 取得UI元素四个角的本地坐标

6.常用方法

6.1 获取UI宽高

// 锚点情况下
Vector2 size = rectTran.sizeDelta;

// 最安全获取
float width = rectTran.rect.width;
float height = rectTran.rect.height;

6.2 设置UI宽高

// 锚点情况下
rectTran.sizeDelta = new Vector2(200, 200);

// 最安全设置宽高  
rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 400);
rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 200);   

6.3 设置布局方式

rectTran.anchorMin = new Vector2(0, 0);
rectTran.anchorMax = new Vector2(1, 0);
rectTran.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, rectTran.parent.GetComponent<RectTransform>().rect.width);
rectTran.anchoredPosition = new Vector2(0, 0);
rectTran.pivot = new Vector2(0.5f, 0);
rectTran.anchoredPosition = new Vector2(0, 0);

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/34021.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据可视化 | Tableau从入门到高手 入门联接关系数据预处理

Tableau 人人可用、处处可用的分析 Tableau 是一个可视化分析平台&#xff0c;它改变了我们使用数据解决问题的方式&#xff0c;使个人和组织能够充分利用自己的数据。利用 Tableau 查看并理解任何数据。 Tableau Software 可以帮助人们查看并理解数据&#xff0c;可连接到几乎…

蓝桥杯实战应用【算法代码篇】-基于数组实现线性表

前言 线性表是由有限个具有相同性质的元素构成,结构上要求,非表头和表尾元素有且只有一个前驱和后继。对于表头和表尾元素,如果是没有环的线性表,则表头元素没有前驱,表尾元素没有后继。如果有环则均存在前驱和后继元素。对于线性结构,有两种保存的方法,一种是使用C语言…

Spring Boot Admin -Actuator 图形化管理工具

Spring Boot Admin 概述 之前学习了Spring Boot Actuator的特性&#xff0c;它能够是开发者很便捷的监控系统的各种指标&#xff0c;但是有一个很大的问题 — 不够直观。今天来学习下Spring Boot Admin。Spring Boot Admin 是一个免费的开源社区项目&#xff0c;用于监控、管…

Java多线程:从基本概念到避坑指南

本文为掘金社区首发签约文章&#xff0c;未获授权禁止转载 多核的机器&#xff0c;现在已经非常常见了。即使是一块手机&#xff0c;也都配备了强劲的多核处理器。通过多进程和多线程的手段&#xff0c;就可以让多个CPU同时工作&#xff0c;来加快任务的执行。 多线程&#xf…

户外运动耳机推荐、这几款耳机专为户外运动而生

随着夏日的艳阳离去&#xff0c;秋意渐浓。在这个最适合郊外野游&#xff0c;最适合户外运动的季节&#xff0c;我们当然不能继续做我们的宅男宅女&#xff0c;而应该放任自己到野地里去撒一回野。当然&#xff0c;对于没有数码产品一天都不能活的你来说&#xff0c;即使行走在…

debug(二)(还没完)

视频来源&#xff1a;尚硅谷_宋红康_IDEA2022版本的安装与使用 【【尚硅谷】IDEA2022全新版教程&#xff0c;兼容JDK17&#xff08;快速上手Java开发利器&#xff09;】 https://www.bilibili.com/video/BV1CK411d7aA?p16&vd_source581d732b20cb23e01428068f153a99ed I…

Spring Security(5)

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; 经常上网的人都应该有这样的体验&#xff1a;很多网站或者APP只需要第一次登录时输入用户名和密码之后&#xff0c;后面很长一段时间内就不需要再次输入密码了。…

48种数据分析可视化图表

可视化对于数据分析师来说可能不是最重要的&#xff0c;重要的是你分析或挖掘出来的结果是否有效。在这基础之上就需要通过可视化恰当完整的表达见解。这里又有区别了&#xff1a;实用性和美观性哪个更重要&#xff1f;要我说实用性是第一位的&#xff0c;能用一个元素表达最好…

python中的GUI自动化工具介绍

目录 1.pyautoGui 2.Lackey 3.AXUI 4.winGuiAuto 5.pywinauto 6.总结 1.pyautoGui PyAutoGUI是一个纯Python的GUI自动化工具&#xff0c;通过它可以让程序自动控制鼠标和键盘的一系列操作来达到自动化测试的目的。PyAutoGui 也一个流行的跨平台库&#xff08;具有基于图…

Day5:写前端项目(html+css+js)-导航部分p1

目录 实现折叠按钮 medium screen size 实现折叠按钮 效果图&#xff1a; 如何在调整屏幕尺寸大小的时候&#xff0c;导航栏的列表会从横的变成三条杠杠。就像手风琴导航栏 手风琴button的操作 aria-expanded - Accessibility | MDN <button class"mobile-nav-tog…

【opencv】形态学重建案例-数糖果(细胞)个数

原始图片如下&#xff0c;要求是利用形态学重建方法数出糖果个数 step1&#xff1a;先进行测地膨胀 令F表示标记图像&#xff0c;令G表示模板图像。在讨论中&#xff0c;我们假设两幅图像都是二值图像&#xff0c;且F包含于G。标记图像相对于模板大小为1的测地膨胀定义为 F相对…

ssm分页实战

1. 插件 1. maven <!-- 分页插件 --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.2.0</version></dependency> 3. mybaits核心配置文件中或spring配置文件中…

这就叫速度,并发编程深度解析实战七天杀上 GitHub 榜首

并发编程&#xff01;在一二线互联网公司的面试中&#xff0c;逃避不了也是必问的面试题&#xff0c;而绝大部分程序员对并发编程的理解也都停留在使用阶段。那么今天团长给大家推荐的这份资料&#xff0c;绝对可以帮到你。 本书涵盖了六个特点&#xff1a; 特色一&#xff1a…

linux mysql5.7.25 主从复制_生产版本

文章目录一、安装配置1. 部署总览2. 下载软件3. 解压重命名4. 创建组5. 安装数据库6. 配置my.cnf7. 添加开机启动8. 配置数据木库9. 启动mysql10. 登录修改密码11. 允许远程连接二、master节点主从2.1. 主从复制账号创建2.2. 创建主从复制的账号2.3. 账号授权2.4. 查看同步bin-…

VUE的10个常用指令

01 v-once 说明&#xff1a;只渲染元素和组件一次。随后的重新渲染&#xff0c;元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 <!-- 单个元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --&…

二进制逻辑运算和基本门电路

目录 基本门电路很重要&#xff0c;做内存扩展片选译码的时候会常用 一&#xff1a;逻辑非&#xff08;按位取反&#xff09; not 二&#xff1a;逻辑乘&#xff08;逻辑与&#xff09;按位求“与” 有零出零 and 三&#xff1a;逻辑或&#xff08;逻辑加) 有1出1 …

2023-2028年中国化工新材料行业发展前景与投资趋势分析报告

本报告由锐观咨询重磅推出&#xff0c;对中国化工新材料行业的发展现状、竞争格局及市场供需形势进行了具体分析&#xff0c;并从行业的政策环境、经济环境、社会环境及技术环境等方面分析行业面临的机遇及挑战。还重点分析了重点企业的经营现状及发展格局&#xff0c;并对未来…

JavaScript高级复习下(60th)

1、函数内 this 的指向 2、严格模式 1、什么是严格模式 JavaScript 除了提供正常模式外&#xff0c;还提供了 严格模式&#xff08;strict mode&#xff09;。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式&#xff0c;即在严格的条件下运行 JS 代码。 严格模式…

说一下 ArrayDeque 和 LinkedList 的区别?

大家好&#xff0c;我是小彭。 在上一篇文章里&#xff0c;我们聊到了基于链表的 Queue 和 Stack 实现 —— LinkedList。那么 Java 中有没有基于数组的 Queue 和 Stack 实现呢&#xff1f;今天我们就来聊聊这个话题。 小彭的 Android 交流群 02 群已经建立啦&#xff0c;扫描…

APP到底有没有权限-恶意拷贝删除照片

作者&#xff1a;黑蛋 近期发生了一件比较恶劣的事情&#xff0c;某客户在某物上面买了一件东西&#xff0c;但是这个东西是假货&#xff0c;所以客户致电某物人工客服&#xff0c;并进行了录音&#xff0c;这时候某物试图通过自身的客户端软件&#xff0c;去删除客户手机上的…