Unity UI系统中RectTransform详解

一、基础代码示例

public GameObject node; 
var rect = node.GetComponent<RectTransform>();Debug.Log($"anchoredPosition----{rect.anchoredPosition}");
Debug.Log($"offsetMin.x--{rect.offsetMin}");
Debug.Log($"offsetMax.x--{rect.offsetMax}");
Debug.Log($"rect.sizeDelta----{rect.sizeDelta}");
Debug.Log($"rect.rect----{rect.rect}");
Debug.Log($"rect.anchorMax----{rect.anchorMax}");
Debug.Log($"rect.anchorMin----{rect.anchorMin}");

场景结构

  • Parent 对齐方式
    在这里插入图片描述

  • 节点结构
    在这里插入图片描述


二、X轴有拉伸的情况

1. 向上对齐

参数面板

在这里插入图片描述

  • Left: Parent左边(AD)到Child左边(EH)的距离偏移,向右为正,向左为负。
  • Right: Parent右边(BC)到Child右边(FG)的距离偏移,向左为正,向右为负。
  • PosY: CD边到Child中心点(M)的距离偏移,向上为正,向下为负。
  • Height: Child的高度(EH或FG)。
日志输出

在这里插入图片描述

anchoredPosition
anchoredPosition----(0.00, -20.00)

表示原点O(AB的中点)到Child中心点M的偏移。

在这里插入图片描述

offsetMinoffsetMax
offsetMin--(68.00, -70.00)
offsetMax--(-68.00, 30.00)
  • offsetMin: 左下角锚点(A)到Child左下角(B)的偏移。
  • offsetMax: 右上角锚点(D)到Child右上角(C)的偏移。

在这里插入图片描述

sizeDelta
rect.sizeDelta----(-136.00, 100.00)
  • sizeDelta.x: Child宽度相对Parent的宽度,即 sizeDelta.x = -(68 * 2) = -136
  • sizeDelta.y: 因Y轴未被拉伸,等于Child高度 = 100

在这里插入图片描述

rect
rect.rect----(x:-32.00, y:-50.00, width:64.00, height:100.00)

表示Child自身中心(A)到自身左下角(B)的偏移。

在这里插入图片描述

anchorMaxanchorMin
rect.anchorMax----(1.00, 1.00)
rect.anchorMin----(0.00, 1.00)
  • anchorMin: Child左下角锚点坐标。
  • anchorMax: 右上角锚点坐标。

在这里插入图片描述

当锚点发生变化时:

在这里插入图片描述
在这里插入图片描述


2. 居中对齐

参数面板

在这里插入图片描述
在这里插入图片描述

日志输出

在这里插入图片描述


3. 向下对齐

参数面板

在这里插入图片描述
在这里插入图片描述

日志输出

在这里插入图片描述


三、Y轴有拉伸的情况

1. 向左对齐

参数面板

在这里插入图片描述

  • PosX: Parent左边(AD)到Child中心点(M)的水平距离偏移,向右为正,向左为负。
  • Top: Parent上边(DC)到Child上边(HG)的垂直偏移,向下为正,向上为负。
  • Width: Child宽度(HG)。
  • Bottom: Parent下边(AB)到Child下边(EF)的垂直偏移,向上为正,向下为负。

在这里插入图片描述

日志输出

在这里插入图片描述

anchoredPosition
anchoredPosition----(100.00, 30.00)

O为原点(AB的中点),M为Child的中点。

在这里插入图片描述

offsetMinoffsetMax
offsetMin--(68.00, 30.00)
offsetMax--(132.00, 30.00)
  • offsetMin: 左下角锚点(A)到Child左下角(C)的偏移。
  • offsetMax: 右上角锚点(B)到Child右上角(B)的偏移。

在这里插入图片描述

sizeDelta
rect.sizeDelta----(64.00, 0.00)
  • sizeDelta.x: Child宽度 = 64
  • sizeDelta.y: 因X轴未被拉伸,sizeDelta.y = 0

在这里插入图片描述


2. 居中对齐

参数面板

在这里插入图片描述
在这里插入图片描述

日志输出

在这里插入图片描述


3. 向右对齐

参数面板

在这里插入图片描述
在这里插入图片描述


四、XY轴同时拉伸

参数面板

在这里插入图片描述
在这里插入图片描述

  • Left: Parent左边(AD)到Child左边(EH)的距离偏移,向右为正,向左为负。
  • Right: Parent右边(BC)到Child右边(FG)的距离偏移,向左为正,向右为负。
  • Top: Parent上边(DC)到Child上边(HG)的垂直偏移,向下为正,向上为负。
  • Bottom: Parent下边(AB)到Child下边(EF)的垂直偏移,向上为正,向下为负。
日志输出

在这里插入图片描述


五、无拉伸的情况(以左下角对齐为例)

参数面板

在这里插入图片描述
在这里插入图片描述

日志输出

在这里插入图片描述

  • sizeDelta.x: 等于Child宽度
  • sizeDelta.y: 等于Child高度

总结

  • anchoredPosition: 表示Child中心点相对于锚点原点的偏移。
  • offsetMin / offsetMax: 表示Child与锚点之间的偏移量。
  • sizeDelta: 表示Child相对于Parent的尺寸变化。
  • rect: 表示Child自身的矩形区域。
  • anchorMin / anchorMax: 定义Child的锚点位置。

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

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

相关文章

【数据库】并发控制

并发控制 在数据库系统&#xff0c;经常需要多个用户同时使用。同一时间并发的事务可达数百个&#xff0c;这就是并发引入的必要性。 常见的并发系统有三种&#xff1a; 串行事务执行&#xff08;X&#xff09;&#xff0c;每个时刻只有一个事务运行&#xff0c;不能充分利用…

我们来学mysql -- “数据备份还原”sh脚本

数据备份&还原 说明执行db_backup_cover.sh脚本 说明 环境准备&#xff1a;来源数据库(服务器A)&#xff1b;目标数据库(服务器B)dbInfo.sh脚本记录基本信息 来源库、目标库的ip、port及执行路径 # MySQL 客户端和 mysqldump 的路径 MYSQL_CLIENT"/work/oracle/mysql…

【NLP 78、手搓Transformer模型结构】

你以为走不出的淤泥&#xff0c;也迟早会云淡风轻 —— 25.5.31 引言 ——《Attention is all you need》 《Attention is all you need》这篇论文可以说是自然语言处理领域的一座里程碑&#xff0c;它提出的 Transformer 结构带来了一场技术革命。 研究背景与目标 在 Transfo…

深入理解CSS常规流布局

引言 在网页设计中&#xff0c;理解元素如何排列和相互作用至关重要。CSS提供了三种主要的布局方式&#xff1a;常规流、浮动和定位。本文将重点探讨最基础也是最常用的常规流布局&#xff08;Normal Flow&#xff09;&#xff0c;帮助开发者掌握页面布局的核心机制。 什么是…

树结构详细介绍(javascript版)

树结构的基本概念 树是一种非线性数据结构&#xff0c;由节点和连接节点的边组成。与线性数据结构&#xff08;如数组、链表&#xff09;不同&#xff0c;树具有层次结构&#xff0c;非常适合表示有层次关系的数据。 树的基本术语 节点 (Node)&#xff1a; 树中的基本单元&a…

element-plus bug整理

1.el-table嵌入el-image标签预览时&#xff0c;显示错乱 解决&#xff1a;添加preview-teleported属性 <el-table-column label"等级图标" align"center" prop"icon" min-width"80"><template #default"scope"&g…

RabbitMQ和MQTT区别与应用

RabbitMQ与MQTT深度解析&#xff1a;协议、代理、差异与应用场景 I. 引言 消息队列与物联网通信的重要性 在现代分布式系统和物联网&#xff08;IoT&#xff09;生态中&#xff0c;高效、可靠的通信机制是构建稳健、可扩展应用的核心。消息队列&#xff08;Message Queues&am…

零基础远程连接课题组Linux服务器,安装anaconda,配置python环境(换源),在服务器上运行python代码【3/3 适合小白,步骤详细!!!】

远程连接服务器 请查阅之前的博客——零基础远程连接课题组Linux服务器&#xff0c;安装anaconda&#xff0c;配置python环境&#xff08;换源&#xff09;&#xff0c;在服务器上运行python代码【1/3 适合小白&#xff0c;步骤详细&#xff01;&#xff01;&#xff01;】&am…

Redis最佳实践——安全与稳定性保障之访问控制详解

Redis 在电商应用的安全与稳定性保障之访问控制全面详解 一、安全访问控制体系架构 1. 多层级防护体系 #mermaid-svg-jpkDj2nKxCq9AXIW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-jpkDj2nKxCq9AXIW .error-ico…

vue2源码解析——响应式原理

文章目录 引言数据劫持收集依赖数组处理渲染watchervue3中的响应式 引言 vue的设计思想是数据双向绑定、数据与UI自动同步&#xff0c;即数据驱动视图。 为什么会这样呢&#xff1f;这就不得不提vue的响应式原理了&#xff0c;在使用vue的过程中&#xff0c;我被vue的响应式设…

gcc相关内容

gcc 介绍&#xff1a;linux就是由gcc编译出来的&#xff0c;而且好像之前Linux只支持gcc编译。gcc全称为gnu compiler collection&#xff0c;它是gnu项目的一个组成部分。gnu致力于创建一个完全自由的操作系统&#xff0c;我感觉意思就是完全开源的操作系统。gnu有很多组件和…

android 图片背景毛玻璃效果实现

图片背景毛玻璃效果实现 1 依赖 // Glide implementation("com.github.bumptech.glide:glide:4.16.0") kapt("com.github.bumptech.glide:compiler:4.16.0") implementation("jp.wasabeef:glide-transformations:4.3.0") 2 布局<com.googl…

【Java开发日记】你会不会5种牛犇的yml文件读取方式?

前言 除了烂大街的Value和ConfigurationProperties外&#xff0c;还能够通过哪些方式&#xff0c;来读取yml配置文件的内容&#xff1f; 1、Environment 在Spring中有一个类Environment&#xff0c;它可以被认为是当前应用程序正在运行的环境&#xff0c;它继承了PropertyReso…

Spring Boot事务失效场景及解决方案

事务失效场景1&#xff1a;方法非public修饰 原因 Spring事务基于动态代理&#xff08;AOP&#xff09;实现&#xff0c;非public方法无法被代理拦截&#xff0c;导致事务失效。 代码示例 Service public class OrderService {Transactionalprivate void createOrder() { //…

电子电路:怎么理解时钟脉冲上升沿这句话?

时钟脉冲是数字电路中用于同步各组件操作的周期性信号&#xff0c;通常表现为高低电平交替的方波。理解其关键点如下&#xff1a; 时钟脉冲的本质&#xff1a; 由晶振等元件生成&#xff0c;呈现0/1&#xff08;低/高电平&#xff09;的规律振荡每个周期包含上升沿→高电平→下…

docker部署redis mysql nacos seata rabbitmq minio onlyoffice nginx实战

docker部署redis mysql nacos seata rabbitmq minio onlyoffice nginx实战 一、环境介绍 操作系统&#xff1a;ubuntu22.04 软件环境&#xff1a;docker、docker-compose 二、docker安装 版本规定到26.1.3版本过低会引起莫名其妙的问题。打开终端。更新软件包列表&#x…

全面解析:npm 命令、package.json 结构与 Vite 详解

全面解析&#xff1a;npm 命令、package.json 结构与 Vite 详解 一、npm run dev 和 npm run build 命令解析 1. npm run dev 作用&#xff1a;启动开发服务器&#xff0c;用于本地开发原理&#xff1a; 启动 Vite 开发服务器提供实时热更新&#xff08;HMR&#xff09;功能…

【Oracle】TCL语言

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. TCL概述1.1 什么是TCL&#xff1f;1.2 TCL的核心功能 2. 事务基础概念2.1 事务的ACID特性2.2 事务的生命周期 3. COMMIT语句详解3.1 COMMIT基础语法3.2 自动提交与手动提交3.3 提交性能优化 4. ROLLBACK语句…

OpenCV CUDA模块直方图计算------用于在 GPU 上执行对比度受限的自适应直方图均衡类cv::cuda::CLAHE

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::cuda::CLAHE 是 OpenCV 的 CUDA 模块中提供的一个类&#xff0c;用于在 GPU 上执行对比度受限的自适应直方图均衡&#xff08;Contrast Limi…

OpenGAN:基于开放数据生成的开放集识别

简介 简介&#xff1a;这次学习的OpenGAN主要学习一个思路&#xff0c;跳出传统GAN对于判断真假的识别到判断是已知种类还是未知种类。重点内容不在于代码而是思路&#xff0c;会简要给出一个设计的代码。 论文题目&#xff1a;OpenGAN: Open-Set Recognition via Open Data …