RectTransform 組件(Component
)是 2D 佈局(layout
)中使用的組件,用於控制 UI 組件位置以及對齊方式,繼承自 Transform 組件。
- Transform 表示一個點,只處理位置(
Position
),角度(Rotation
)與縮放(Scale
)
- RectTransform 表示一個 2D 矩形,UI 元素可以放置在這個矩形內,並加入了錨點(
Anchors
),軸心點(Pivot
),長寬等屬性。
- 目的是控制 UI 元件大小,讓其可以自動適應解析度。
屬性 |
說明 |
Anchor |
錨點,為相對於父矩形的錨點,值為 0 ~ 1。 Min:父矩形範圍內 X 和 Y 的最小值 Max:父矩形範圍內 X 和 Y 的最大值 |
Pivot |
矩形範圍內的軸心點,值為 0 ~ 1。影響物件的旋轉,縮放,位置。在錨點計算位置中會用到 |
Pos (X, Y, Z) |
軸心點相對於錨點的位置 |
Width, Height |
矩形的寬高 |
Left/Top/Right/Bottom |
矩形邊緣相的對於錨點的位置。當錨點分離時才會出現。 |
Ratation |
圍繞軸心點的旋轉角度 |
Scale |
縮放大小 |
BluePrint Mode  |
啟用後,編輯旋轉和縮放不會影響矩形,只會影響顯示內容 |
Raw Edit Mode  |
啟用後,改變軸心點和錨點值不會改變矩形位置,但會影響顯示內容 |
軸心點(Pivot
)
軸心點為矩形範圍內的軸心點,它會影響物件的旋轉,縮放,位置。此外在錨點計算位置中會也用到
- 在編輯器中,藍色空心圓就是軸心(Pivot)

- 軸心的值為 0 ~ 1 之間
- 預設值為 (0.5, 0.5),在矩形的中心。
- 當值為 (0, 0) 時,會在矩形位置的左下角。
- 當值為 (1, 1) 時,會在矩形的右上角。

- 物件會根據軸心坐旋轉

錨點(Anchor
)
錨點,為相對於父矩形的錨點。由 Min 和 Max 組成,這四個點在 Unity 編輯器中顯示為四個三角形,並組成一個矩形。
- Min:父矩形範圍內 X 和 Y 的最小值。
- Max:父矩形範圍內 X 和 Y 的最大值。
- 錨點為一個點:當 Min 與 Max 相同時,錨點為一個點。
- 預設 Min 與 Max 皆為 (0.5, 0.5)。此時,為父元素的中心。
- Min 與 Max 皆為 (0, 0)。此時,為父元素的左下角。
- Min 與 Max 皆為 (1.0, 1.0)。此時,為父元素的右上角。

- 錨點為一個點的時候,編輯器左邊顯示的為
Pos X
與 Pox Y
,在此情況下,將錨點看作原點座標,而錨點距離軸心的 X 距離為 Pos X
;錨點距離軸心的 Y 距離為 Pos Y

- 這麼做的原因是為了適應不同解析度。例如,將錨點設定到右上角 Min(0,1) Max(0,1),那麼不論解析度如何改變,這個元件都可以根據錨點保持正確的距離。
- 錨點為一個點的時候,編輯器左邊顯示的還有
Width
與 Height
,這個寬高為元件的寬高,會依據軸心點而有所不同
- 錨點為矩形:當 Min 與 Max 不同時,錨點會分離為一個矩形
- Min 設為 (0.2, 0.1) , Max 設為 (0.8, 0.7)

- 錨點為矩形時,編輯器左邊顯示會變為
Left
, Top
, Right
, Bottom
。表示為錨點矩形與元件的矩形所形成的距離, Left
為左邊距離, Top
為上邊距離, Right
為右邊距離, Bottom
為下邊距離,如下圖。

- 當錨點為矩形時,可以讓元件會根據父元件的變化而拉伸大小。常常用在背景圖。
BluePrint Mode
當勾選了 BluePrint Mode
之後,編輯旋轉和縮放不會影響矩形,只會影響顯示內容

一般不常使用。
Raw Edit Mode
啟用 Raw Edit Mode
後,當改變軸心點和錨點值不會改變矩形位置,但會影響顯示內容
- 開始圖

- 未啟用
Raw Edit Mode
去更改軸心,會發現軸心往上移動,但是圖形沒有變

- 啟用
Raw Edit Mode
去更改軸心,會發現軸心沒有變,但是圖形往下移動

一般不常使用。
使用 Unity 編輯器快速設定軸心與錨點
在編輯器中,會看到如下圖的按鈕,使用滑鼠左鍵點擊,它便會展開
展開後如下圖

使用滑鼠左鍵點擊,就可以快速的設定錨點位置(九宮格佈局)。
按下 Shift
, 再點擊滑鼠左鍵,除了錨點位置,同時可以設定軸心點(相對自身矩形)
按下 Alt
, 再點擊滑鼠左鍵,除了錨點位置,同時可以設置物件位置
因為 RectTransform 繼承自 Transform,因此當該遊戲物件擁有 RectTransform 時,只要將它的 Transform 轉型為 RectTransform 即可。
1
| RectTransform rectTransform = (this.transform as RectTransform);
|
Reference: