【Unity学习笔记】Rect Transform组件

声明:此篇文章是个人学习笔记,并非教程,所以内容可能不够严谨。可作参考,但不保证绝对正确。如果你发现我的文章有什么错误,非常欢迎指正,谢谢哦

Rect Transform官方文档:https://docs.unity3d.com/cn/current/Manual/class-RectTransform.html

Rect Transform

Rect Transform组件是在UGUI中包含表示UI元素的位置和大小相关信息的组件,如果其父项也有Rect Transform组件,那么还可以指定其相对父项的大小和位置以及定位等。

其直观上表现为一个白色虚线框矩形,在未缩放UI元素的情况下,其完全和UI元素的矩形边界重合。要仔细观察才能看到一个白色虚线矩形框,如下图1。当缩放了UI元素(或修改了Scale属性),就能很清楚看到这个矩形虚线框(缩放只修改图形大小,不修改Rect Transform矩形大小),如下图2。
在这里插入图片描述
在这里插入图片描述

Rect Transform属性介绍

在这里插入图片描述

属性功能
Pos X/Y/Z轴心点在这里插入图片描述相对于锚店点在这里插入图片描述的位置
Width/Height矩形的宽度和高度(修改时,按轴心点两侧长度比例进行拉伸)
Left,Top,Right,Bottom锚点四个瓣可以分离,组成一个矩形(矩形框实际是看不见的)在这里插入图片描述当锚点分离时,会取代PosX/Y和Width/Height显示。Left,Top,Right,Bottom分别表示Rect Transform矩形四边相对于锚点矩形的左上右下距离在这里插入图片描述
Anchors左下角和右上角的锚点。(左上角的x和左下角相同,y和右上角相同。右下角同理。因此这里实际上决定的不只是两个角,而是四个角的位置,也就是锚点矩形四边的位置)。Min 左下角锚点位置,是相对于父项的百分比,(0,0)表示父项左下角,(1,1)表示父项右上角。Max 右上角锚点位置,是相对于父项的百分比,(0,0)表示父项左下角,(1,1)表示父项右上角
Pivot轴心点的位置。(0,0)表示Rect Transform矩形左下角,(1,1)表示右上角。若发现修改这里的数值时,场景中的pivot位置没有变化。可能是因为这里需要修改为pivot模式:在这里插入图片描述
Rotation围绕轴心点沿 X、Y 和 Z 轴的旋转角度(以度为单位)。
Scale相对于轴心点位置在 X、Y 和 Z 维度中的缩放。默认为1,需要注意的是,当修改这个值后,缩放的只是图形,而Rect Transform矩形(白色虚线框)大小不变。

轴心点和锚点

1.在这里插入图片描述轴心点是旋转中心,也是缩放中心。
2.在这里插入图片描述锚点是用来确定当前项相对于父项的位置和大小的。锚点有四个(上下左右),锚点自身的位置是按相对于父项的百分比而言的,(0,0)表示锚点在父项的左下角,(1,1)表示锚点在父项的右上角。
在这里插入图片描述
锚点有两种模式
模式一(点模式):当四个锚点共处于一个点时,我们可以设置当前项相对于锚点的位置(通过轴心点),而锚点的位置又是相对于父项而言的。简而言之,在这种模式下,我们可以设置当前项相对于父项的位置。无论屏幕比例如何变动,当前项轴心点相对于父项的位置是不变的,当前项也不会随屏幕比例变化而进行长宽上的缩放。
在这里插入图片描述
模式二(矩形模式):当四个锚点不在同一个点时,四个点作为矩形的四个角的可以构成一个矩形,此时,我们可以设置当前项四边相对于锚点矩形四边的位置。在这种模式下,当前项四边的位置相对于锚点矩形四边位置不变。当屏幕比例发生变化时,当前项会随之拉伸缩放,从而保证前项四边的位置相对于锚点矩形四边位置不变。
在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值