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日
    浏览(175)
  • Unity UGUI的Image(图片)组件的介绍及使用

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

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

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

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

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

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

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

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

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

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

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

    2024年02月16日
    浏览(128)
  • Unity UGUI的ToggleGroup(选项组)组件的介绍及使用

    ToggleGroup(选项组)是Unity UGUI中的一个组件,用于管理一组Toggle(选项)的选择状态。ToggleGroup组件可以确保在同一个ToggleGroup中只有一个Toggle被选中,其他Toggle将自动取消选中状态。 ToggleGroup组件通过监听Toggle的选择状态来实现管理功能。当一个Toggle被选中时,ToggleGroup会遍

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

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

    2024年02月16日
    浏览(58)
  • Unity UGUI的GraphicRaycaster(射线投射)组件的介绍及使用

    GraphicRaycaster是Unity UGUI系统中的一个组件,用于处理射线投射事件。它可以将射线投射到UI元素上,并检测是否有UI元素被点击或触摸到。 GraphicRaycaster通过射线投射的方式来检测UI元素的点击事件。当用户点击屏幕或触摸屏幕时,GraphicRaycaster会发射一条射线,然后检测射线是

    2024年02月15日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包