当前位置: 首页 > backend >正文

【unity游戏开发入门到精通——UGUI】RectTransform矩形变换组件

注意:考虑到UGUI的内容比较多,我将UGUI的内容分开,并全部整合放在【unity游戏开发——UGUI】专栏里,感兴趣的小伙伴可以前往逐一查看学习。

文章目录

  • 一、RectTransform组件介绍
  • 二、RectTransform组件参数
    • 1、Pivot 轴心点
    • 2、Anchors 相对父矩形锚点
    • 3、Pos(X,Y,Z) 轴心点(中心点)相对锚点的位置
    • 4、Width/Height 矩形的宽高
    • 5、Left/Top/Right/Bottom 矩形边缘相对于锚点的位置;当锚点分离时会出现这些内容
    • 6、Rotation 围绕轴心点旋转的角度
    • 7、Scale 缩放大小
    • 8、Blueprint Mode(蓝图模式)
    • 9、Raw Edit Mode(原始编辑模式)
  • 三、小技巧
    • 1、通过点击左上角的框可以快速设置锚点轴心位置
    • 2、图片在不同大小屏幕,自动适配宽高
    • 3、页面UI太多,分组定位他们的位置
  • 三、代码中得到RectTransform
  • 专栏推荐
  • 完结

一、RectTransform组件介绍

RectTransform意思是矩形变换,它继承于Transform,是专门用于处理UI元素位置大小相关的组件。
在这里插入图片描述
Transform组件只处理位置、角度、缩放,RectTransform在此基础上加入了矩形相关,将UI元素当做一个矩形来处理,加入了中心点、锚点、长宽等属性。其目的是更加方便的控制其大小以及分辨率自适应中的位置适应。

二、RectTransform组件参数

在这里插入图片描述

1、Pivot 轴心点

在这里插入图片描述

  • 轴心(中心)点,取值范围0~1
  • 以左下角为原点,右上角为1,1点
  • 轴心点是旋转的中心点
  • 轴心点会和锚点一起用于位置的计算
  • 轴心点会影响当宽高扩大缩小时,往哪个方向进行伸缩的。
    • 比如如果轴心点在图片中心,修改x轴缩放
      在这里插入图片描述
    • 如果轴心点在图片最左边中心,修改x轴缩放(可以实现类似血条、进度条的效果)
      在这里插入图片描述

2、Anchors 相对父矩形锚点

在这里插入图片描述

  • Min是矩形锚点范围X和Y的最小值
  • Max是矩形锚点范围X和Y的最大值
  • 取值范围都是0~1
  • 当Min和Max对应的xy值设置的完全贴合时,锚点会以点的形式存在。会根据锚点位置建立坐标系,根据和UI对象轴心点的距离计算出UI对象的位置
  • 当Min和Max对应的xy值设置的分开时,会根据锚点的四条边和UI对象的四条边计算位置。一些背景图可能会用到锚点分开的情况,会根据父对象的变化而填满拉伸。如果要用到子对象随着父对象的变化而变化的时候可以选择锚点分开。
    在这里插入图片描述

3、Pos(X,Y,Z) 轴心点(中心点)相对锚点的位置

在这里插入图片描述

4、Width/Height 矩形的宽高

在这里插入图片描述

5、Left/Top/Right/Bottom 矩形边缘相对于锚点的位置;当锚点分离时会出现这些内容

在这里插入图片描述

6、Rotation 围绕轴心点旋转的角度

在这里插入图片描述

7、Scale 缩放大小

在这里插入图片描述

8、Blueprint Mode(蓝图模式)

在这里插入图片描述
启用后,编辑旋转和缩放不会影响矩形,只会影响显示内容。一般不勾选。
在这里插入图片描述

9、Raw Edit Mode(原始编辑模式)

在这里插入图片描述

  • 启用后,改变轴心和锚点值不会改变矩形位置,即改变轴心位置,图片显示的位置会改变,但是不改变UI对象的Pos位置的数值
  • 不启用时,改变轴心位置,UI对象的Pos位置也会改
    在这里插入图片描述

三、小技巧

1、通过点击左上角的框可以快速设置锚点轴心位置

Shift:同时设置轴心,Alt:同时设置位置
在这里插入图片描述

2、图片在不同大小屏幕,自动适配宽高

要想图片在不同大小屏幕,自动适配宽高,我们可以把锚点分开,设置和UI屏幕一样大小
在这里插入图片描述

3、页面UI太多,分组定位他们的位置

UI很多的话,我们要一个个设置他们锚点的位置,很麻烦。我们可以把相同位置的UI进行分组,看成一个整体。

比如我想左上角的UI,全部定义在左上角位置,也就是锚点设置在左上角。我们可以新建一个UI面板,作为这些UI的父类,将他们包裹起来。然后只需要调整父类UI的位置即可实现统一调整。
在这里插入图片描述
在这里插入图片描述

三、代码中得到RectTransform

获取RectTransform控件宽高属性

this.transform as RectTransform
print((this.transform as RectTransform).sizeDelta);

专栏推荐

地址
【unity游戏开发入门到精通——C#篇】
【unity游戏开发入门到精通——unity通用篇】
【unity游戏开发入门到精通——unity3D篇】
【unity游戏开发入门到精通——unity2D篇】
【unity实战】
【制作100个Unity游戏】
【推荐100个unity插件】
【实现100个unity特效】
【unity框架/工具集开发】
【unity游戏开发——模型篇】
【unity游戏开发——InputSystem】
【unity游戏开发——Animator动画】
【unity游戏开发——UGUI】
【unity游戏开发——联网篇】
【unity游戏开发——优化篇】
【unity游戏开发——shader篇】

完结

好了,我是向宇,博客地址:https://xiangyu.blog.csdn.net,如果学习过程中遇到任何问题,也欢迎你评论私信找我。

赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的点赞评论和关注,你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法,也欢迎评论私信告诉我哦!
在这里插入图片描述

http://www.xdnf.cn/news/490.html

相关文章:

  • 保生产 促安全 迎国庆
  • 平均池化(Average Pooling)
  • Ai Agent 在生活领域的深度应用与使用指南
  • 第七周作业
  • day29 学习笔记
  • Jenkins设置中文显示
  • Mermaid 是什么,为什么适合AI模型和markdown
  • webgl入门实例-向量在图形学中的核心作用
  • 【2025】Datawhale AI春训营-蛋白质预测(AI+生命科学)-Task2笔记
  • Cribl 优化EC2 ip-host-region 数据
  • 20-算法打卡-哈希表-赎金信-leetcode(383)-第二十天
  • Java反射
  • 废物九重境弱者学JS第十四天--构造函数以及常用的方法
  • VBA 调用 dll 优化执行效率
  • YOLO拓展-锚框(anchor box)详解
  • 基础智能体的进展与挑战第 5 章【奖励】
  • word表格批量操作——宏
  • 工业物联网安全网关 —— 安全OTA升级签名验证
  • 【计算机网络 | 第二篇】常见的通信协议(一)
  • Jetson Orin NX 部署YOLOv12笔记
  • 学生成绩统计系统需求说明书
  • 180-《商陆》
  • 基于medusa范式的大模型并行解码推理加速初探
  • sql之DML(insert、delete、truncate、update、replace))
  • Vue组件深度封装:从复用艺术到架构思维
  • P1113 杂务-拓扑排序
  • 【网络编程】TCP数据流套接字编程
  • Cypress EZ-USB CX3 适配输出imx586相机
  • 100KNTC阻值表
  • CTF--秋名山车神