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
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/83139.shtml
英文地址,請注明出處:http://en.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 …