Unity UGUI 原理篇 (三):RectTransform解析

RectTransform

RectTransform 是 Transform 的 2D 对应 Component,Transform 表示单个点,RectTransform 表示一个2D矩形(UI空间),如果父子物体都有RectTransform,那麽子物体可以指定在父物体矩形中的位置与大小,简单来说RectTransform 就是定义UI元素的位置、旋转、大小

Anchor (锚点)

物体的锚点(对齐点),如果父子都有 RectTransform 情况下,子物体可以依据 Anchor 对齐到父物体,又分为 Min 与 Max 位置,如下图物体四周有4个三角形





Anchor位置座标与关系

当我们使用滑鼠点选4个三角形调整Anchor时,会贴心的出现比例讯息,此比例是子物体在父物体中的缩放比例


当Canvas 下有1张图 Anchor Min 与 Anchor Max 皆为 (0.5 , 0.5),如下左图部分

如果将Anchor Min调整为(0.3, 0.5) ,Anchor Max调整为 (0.5, 0.7),如下右图部分

注意看 左图 Pos X、Pos Y、Width、Height ,会改变为 右图 Left、Top、Right、Buttom


因为当 Anchor 在同一点时,显示的是物体的座标与大小,当 Anchor 不在同一点时(此时会形成矩形),显示的会是 Anchor 矩形填充空间,如下图,(P.S.在我们移动物体时会贴心的显示目前与 Anchor 距离关系)


上面看完一定还是不了解怎麽运作,让我们来透过实例了解一下

Canvas 下有5张图,Anchor Min 与 Anchor Max 皆为 (0.5 , 0.5),物体的位置会对齐到父物体的中心,当父物体大小改变时,情形如下

Canvas 下有1张图,Anchor Min 与 Anchor Max 皆为 (0.0, 1.0),物体的位置会对齐到父物体的左上角,当父物体大小改变时,情形如下,物体会固定在左上角


Canvas 下有1张图,Anchor Min 为 (0.0, 0.0), Anchor Max 为 (1.0, 0.0),物体的位置会对齐到父物体的左下角与右下角,当父物体大小改变时,情形如下,物体宽度会随著父物体改变


由上面的几个实例可以知道,子物体会依据所设定 Anchor 对齐到父物体,当父物体大小改变时,透过 Anchor 更新子物体,上面有提到当我们点选4个三角形调整Anchor时,画面会贴心的出现比例讯息,相信有经验的人一定知道该比例的用意,此比例就是子物体在父物体中的缩放比例,以下举例

原来数值

Parent Size (400, 350)

Image Size (120, 105)

Anchor Min 为 (0.2, 0.5), Anchor Max 为 (0.5, 0.8)


Parent Size 一半时数值

Parent Size (200, 175)

Image Size (60, 52.5)

Image Size Width  = 400 * 50% * 30% = 60

Image Size Height = 350 * 50% * 30% = 52.5

Anchor Min 为 (0.2, 0.5), Anchor Max 为 (0.5, 0.8)

经由上面可以得知父物体在缩小2倍后,父物体透过子物体的 Anchor 比例更新子物体,透过这种方式,我们可以达到不同萤幕解析度自动改变UI大小与位置


Anchor Presets

点选 RectTransform 左上角,可以开启Anchor Presets 工具,这边列出了常用的 Anchor ,可以快速套用,按住Shift 可以连同 Pivot 一起改变,按住 Alt 可以连同位置一起改变

Pivot (支点)
物体自身的支点,影响物体的旋转、缩放、位置,改变 UI Pivot 必须先开启控制面板的 Pivot 按钮,如下图

当 Pivot (0.5, 0.5)


 

当 Pivot (0, 1)

 
Blue Print Mode(蓝图模式) 、 Raw Edit Mode(原始编辑模式)


Blue Print Mode (蓝图模式)

忽略了物体的 Local Rotation 和 Local Scale,方便以原来的旋转与大小调整物体


Raw Edit Mode (原始编辑模式)

在 Inspector 中调整 Pivot 和 Anchor 时,物体会维持目前的位置与大小(Inspector 中数值部分),调整情形如下,请注意数值部分

Inspector 中调整  Pivot




Inspector 中调整  Anchor


参考资料
■ Unity – Manual: Basic Layout

http://docs.unity3d.com/Manual/UIBasicLayout.html

■ UnityのuGUIのレイアウト调整机能について解说してみる(RectTransform入门)

http://tsubakit1.hateblo.jp/entry/2014/12/19/033946
原文作者: k79k06k02k
原文链接:http://k79k06k02k.com/blog/334/unity/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%B8%89%EF%BC%9Arecttransform

猜你喜欢

转载自blog.csdn.net/qq_32821435/article/details/80157330