RectTransform

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 後，當改變軸心點和錨點值不會改變矩形位置，但會影響顯示內容

1. 開始圖
   
2. 未啟用 Raw Edit Mode 去更改軸心，會發現軸心往上移動，但是圖形沒有變
   
3. 啟用 Raw Edit Mode 去更改軸心，會發現軸心沒有變，但是圖形往下移動
   

一般不常使用。

---

使用 Unity 編輯器快速設定軸心與錨點

在編輯器中，會看到如下圖的按鈕，使用滑鼠左鍵點擊，它便會展開

展開後如下圖

使用滑鼠左鍵點擊，就可以快速的設定錨點位置(九宮格佈局)。

按下 Shift ， 再點擊滑鼠左鍵，除了錨點位置，同時可以設定軸心點（相對自身矩形）
按下 Alt ， 再點擊滑鼠左鍵，除了錨點位置，同時可以設置物件位置

---

在程式碼中，取得 RectTransform

因為 RectTransform 繼承自 Transform，因此當該遊戲物件擁有 RectTransform 時，只要將它的 Transform 轉型為 RectTransform 即可。

RectTransform rectTransform = (this.transform as RectTransform);

Reference:

• https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/class-RectTransform.html
• https://www.arkaistudio.com/blog/2016/05/02/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%b8%89%ef%bc%9arecttransform/