UGUI---RectTransform、錨點、軸心點詳解





參考博客:SerenaHaven Zui

RectTransform介紹

創建一個UGUI控件時,原先自帶的的Transform被替換成RectTransform。這個組件繼承於Transform,主要提供一個矩形的位置、尺寸、錨點和中心信息以及操作這些屬性的方法,同時提供多種基於父級RectTransform的縮放形式。

其中最復雜也非常好用的兩個概念:Anchor(錨點)、Pivot(中心點)

1、錨點Anchor

  • 錨點就是如圖四個小三角,可以合並也可以分開。

  • 剛創建的UI默認都是Min(0.5,0.5)和Max(0.5,0.5)

錨點合並時

此時的UI元素為絕對布局,即非stretch狀態,RectTransform面板屬性顯示為:

  • 此時Pos XYZ即為以錨點為原點,UI中心點離原點的位置
  • 此時不論父物體怎么變,其面板屬性都不會改變

錨點分開時

此時的UI元素為相對布局,即stretch狀態,RectTransform面板屬性顯示為:

  • 4個方向的值即為,邊於邊之間的距離
  • 其上下左右的值是不會變的,即UI元素4個角和4個錨點的距離是不變的。
  • 如果想讓UI元素跟着父物體進行等比縮放,就把4個錨點放在父物體4個角即可。

2、中心點Pivot

了解中心點之前需要了解Unity界面左上角的一個按鈕。

這個按鈕有兩種狀態:
Center:此時軸心點是半透明的,不可鼠標操作。Center是Unity自己根據模型的mesh計算的中心位置,和模型真實坐標軸沒關系。

Pivot:此時軸心點是不透明的,可鼠標操作。Pivot就是模型坐標軸的真實位置,也就是說再模型軟件中設定的坐標軸。



如圖中間的藍色圓圈即為中心點


中心點數值范圍為0-1。
(0,0)為左下角,(1,1)為右上角

3、anchorPosition

錨點合並時

此時anchorPosition就是錨點到中心點的向量值,即為RectTransform中值

錨點分開時

點擊此位置開啟debug模式,便可查看錨點分開時的anchorPosition。

此時anchorPosition為錨點的中心到中心點的向量值。

4、anchorPosition與position

anchoredPosition和anchoredPositoin3D都可以認為是以像素為單位。

關於RectTransform的position和localPosition,它們的值根其所屬的Canvas的渲染模式有關。

在Screen Space——Overlay的模式下,由於Canvas的世界尺寸與其像素尺寸在數值上相等,因此其rectTransform的position與其在屏幕空間的坐標在數值上也相等。這種模式下,要獲取某個RectTransform的屏幕坐標,直接使用position就可以。

在Screen Space——Camera的模式和World Space下,RectTransform的渲染與攝像機有關,在獲取其屏幕坐標時,需要利用canvas.worldCamera,或者transform.TransformPoint等坐標轉換函數進行坐標轉換。

5、RectTransform.offsetMax/offsetMin

錨點合並時

RectTransform.offsetMin (x,y)即為左下角到錨點的距離
RectTransform.offsetMax (x,y)即為右上角到錨點的距離

錨點分開時

RectTransform.offsetMin (x,y)即為Left和Top
RectTransform.offsetMax (x,y)即為Right和Bottom
offsetMin表示物體左下角相對AnchorMin的偏移,offsetMax表示物體右上角相對AnchorMax的偏移

6、RectTransform.sizeDelta

sizeDelta.x = offsetMax.x - offsetMin.x;
sizeDelta.y = offsetMax.y - offsetMin.y;

錨點合並時
sizeDelta的值等於RectTransform.rect.size的值。
此時和UI的長寬相等。

錨點分開時
rect.sizeDelta.x的值為left和right之和。
rect.sizeDelta.y的值為top和bottom之和。
此時和UI的長寬不等,所以一般不用這種方式獲取UI長寬。

7、RectTransform.rect

4個常用屬性。x、y、width、height

  • rect.x,rect.y是以Pivot為原點,UI左下角的坐標。
  • rect.width,rect.height是UI的寬度和高度。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM