Unity RectTransform 组件
创始人
2024-02-13 19:28:10

文章目录

  • 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.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().rect.width);
rectTran.anchoredPosition = new Vector2(0, 0);
rectTran.pivot = new Vector2(0.5f, 0);
rectTran.anchoredPosition = new Vector2(0, 0);

在这里插入图片描述

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...