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: