Unity RectTransform 组件

这篇具有很好参考价值的文章主要介绍了Unity RectTransform 组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.RectTransform 介绍

Unity 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 锚点

Unity RectTransform 组件
对锚点的不同设置,RectTransform会出现不同属性(左右属性不会同时出现)

Pos X (Anchors X 到 Pivot Y 的距离) —— Left
Pos Y (Anchors Y 到 Pivot Y 的距离) —— Top
Width (UI 元素宽度) —— Right
Height ( UI 元素高度) —— Bottom

1.当 UI 四个锚点都在一起时
Unity RectTransform 组件
2.当 X 方向锚点分开时
Unity RectTransform 组件
3.当 Y 方向锚点分开时
Unity RectTransform 组件
4.当 X Y 方向锚点都分开时
Unity RectTransform 组件

3.Pivot 轴心点

轴心点的不同,会造成UI的缩放/旋转效果不同,以及与父物体形成的 UI 适应问题

4.RectTransform API 属性

4.1 anchorMax、anchorMin —— 锚点矩形

Anchors的Min和Max分别是归一化的位置值(从0到1),表示占父RectTransform的百分比Unity RectTransform 组件

4.2 offsetMax、offsetMin —— 偏移量

offsetMax:
当前UI矩形右上角相对于锚点右上角的偏移(UI元素的右上角的坐标,减去右上角锚点的坐标)
offsetMin:
当前UI矩形左下角相对于锚点左下角的偏移(UI元素的左下角角的坐标,减去左下角锚点的坐标)
Unity RectTransform 组件

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
    Unity RectTransform 组件
    此时,设置sizeDelta的X,Y值,可以直接调整UI元素的大小
  2. 锚框情况下的sizeDelta
    sizeDelta.x:
    锚框的宽度与UI元素的宽度的差值
    sizeDelta.y:
    锚框的的高度与UI元素的高度的差值
    Unity RectTransform 组件

4.5 anchoredPosition —— UI坐标

  1. 锚点情况
    anchoredPosition UI元素Pivot到Anchor的距离
    Unity RectTransform 组件2.
  2. 锚框情况
    anchoredPosition UI元素Pivot到锚框中心点的距离
    Unity RectTransform 组件

5.RectTransform API 方法

5.1 SetSizeWithCurrentAnchors(Animations.Axis axis, float size)

这个方法无论在绝对布局还是相对布局的情况下,都可以通过直接设置rect中的width和height值来改变UI元素的大小。

rectTransform = GetComponent<RectTransform>();
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);

Unity RectTransform 组件

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

Unity RectTransform 组件文章来源地址https://www.toymoban.com/news/detail-431281.html

到了这里,关于Unity RectTransform 组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity UGUI的Button组件的介绍及使用

    UGUI(Unity GUI)是Unity引擎中的一套用户界面系统,Button(按钮)是其中的一个常用组件。Button组件可以用于创建可交互的按钮,用户点击按钮时可以触发相应的事件。 Button组件通过检测用户的点击事件来触发相应的操作。当用户点击按钮时,Button组件会检测到点击事件,并执

    2024年02月12日
    浏览(53)
  • Unity UGUI的Canvas(画布)组件的介绍及使用

    Canvas(画布)是Unity UGUI系统中的一个重要组件,用于在屏幕上绘制UI元素。它是UI元素的容器,可以包含各种UI元素,如按钮、文本、图像等。Canvas组件提供了一种方便的方式来管理和渲染UI元素。 Canvas组件通过渲染器将UI元素绘制到屏幕上。它使用层级结构来管理UI元素的显

    2024年02月08日
    浏览(55)
  • Unity UGUI的Text(文本)组件的介绍及使用

    UGUI(Unity Graphic User Interface)是Unity引擎的一套用户界面系统,而Text(文本)组件是UGUI中用于在游戏界面中显示文本的组件。该组件可以用于显示游戏中的文字、数字、标签等信息。 使用UGUI的Text组件可以在游戏界面中实时显示文字信息,方便玩家了解游戏的状态、交互信息

    2024年02月12日
    浏览(46)
  • Unity UGUI的Outline(描边)组件的介绍及使用

    Outline(描边)组件是Unity UGUI中的一种特效组件,用于给UI元素添加描边效果。通过设置描边的颜色、宽度和模糊程度,可以使UI元素在视觉上更加突出。 Outline(描边)组件通过在UI元素周围绘制多个相同的UI元素,并设置不同的颜色和大小,从而实现描边的效果。描边的宽度和模糊

    2024年02月15日
    浏览(56)
  • Unity UGUI的Image(图片)组件的介绍及使用

    UGUI的Image(图片)组件是Unity引擎中的一种UI组件,用于显示2D图像。它提供了一种简单而灵活的方式来在游戏中加载和显示图片。 使用UGUI的Image组件可以方便地在游戏中展示各种图片资源,比如角色头像、道具图标等。它具有以下优点: 易用性 :UGUI的Image组件提供了简单易

    2024年02月11日
    浏览(43)
  • Unity UGUI的Mask(遮罩)组件的介绍及使用

    Mask(遮罩)组件是Unity UGUI中的一个重要组件,用于限制子对象的可见区域。通过设置遮罩组件,可以实现一些特殊效果,如显示部分图片、裁剪文本等。 Mask组件通过将子对象与遮罩对象进行比较,只显示与遮罩对象重叠的部分,从而实现遮罩效果。遮罩对象可以是任意形状

    2024年02月13日
    浏览(48)
  • Unity UGUI的VerticalLayoutGroup(垂直布局)组件的介绍及使用

    VerticalLayoutGroup是Unity UGUI中的一种布局组件,用于在垂直方向上自动排列子对象。它可以根据子对象的大小和布局设置,自动调整子对象的位置和大小,实现垂直布局效果。 VerticalLayoutGroup组件通过以下步骤实现垂直布局: 获取所有子对象的RectTransform组件。 根据子对象的大小

    2024年02月16日
    浏览(67)
  • Unity UGUI的LayoutElement(布局元素)组件的介绍及使用

    LayoutElement是Unity UGUI中的一个布局元素组件,用于控制UI元素在布局中的大小和位置。它可以用于自动调整UI元素的大小,以适应不同的屏幕分辨率和布局需求。 LayoutElement组件通过设置一些属性来控制UI元素的布局,包括最小和最大宽度、最小和最大高度、宽度和高度的优先级

    2024年02月16日
    浏览(53)
  • Unity UGUI的EventSystem(事件系统)组件的介绍及使用

    EventSystem是Unity UGUI中的一个重要组件,用于处理用户输入事件,如点击、拖拽、滚动等。它负责将用户输入事件传递给合适的UI元素,并触发相应的事件回调函数。 EventSystem组件通过射线检测来确定用户输入事件发生的位置,并将事件传递给最合适的UI元素。它会根据UI元素的

    2024年02月16日
    浏览(111)
  • Unity UGUI的RawImage(原始图片)组件的介绍及使用

    RawImage是Unity UGUI中的一个组件,用于显示原始图片。与Image组件不同,RawImage可以直接显示原始图片的像素数据,而不需要经过额外的处理。 RawImage组件通过将原始图片的像素数据直接传递给显卡进行渲染,从而实现显示原始图片的功能。它可以显示各种格式的图片,包括常见

    2024年02月16日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包