前幾章節當中，或多或少接觸過 RectTransform ，這一章節我們來詳細地學習一下 RectTransform 組件
什麼是 RectTransform
RectTransform 是 UGUI 中用來標記 UI 元素位置和大小的組件，該控件繼承自 Transform
[NativeClass("UI::RectTransform")]
[NativeHeader("Runtime/Transform/RectTransform.h")]
public sealed class RectTransform : Transform
{
......
}
RectTransform 的屬性
英文輸入法狀態下按下 T 鍵，或點擊左上角導航欄中的按鈕，切換至 Rect Tool 模式下，可以在 Scene 視圖中對 UI 元素進行快捷操作
1. Anchors
UGUI 的 Anchor 比 NGUI 的 Anchor 形式更多，使用更靈活
- Scene 中以四個小三角來標識， Inspector 視頻中 Min 和 Max 兩個 Vector2 來記錄 Anchor 的位置
- Min 和 Max ∈ { [0, 1], [0, 1] }
- Anchor 描述當前 UI 元素與其父物體的位置關係，可以理解爲相對父物體的一個基準，Anchor 的四個角總是位於父物體的包圍盒之內
介紹兩個概念
錨點：當 Anchor 四個點重合爲一個點時，稱之爲“錨點”形態。處於錨點時的 UI 元素只受其父物體位置影響，不受其大小影響
- 下圖中 Anchor 三角標識是美女圖片的 Anchor，並非背景圖的 Anchor（先選中美女圖片，再點擊 Inspector 視圖的小鎖子將其鎖定，這樣切換選中背景圖後，Scene 視圖中所標識的 Anchor 仍爲美女圖片的 Anchor， 這樣做僅僅是爲了方便觀察）
- 錨點模式下，UI 大小位置編輯區以 xyz + wh 形式來標記。點 xyz 是錨點到 UI 自身基準點的向量（可理解爲各軸的距離）， wh 是 UI 包圍盒的大小。
當把光標放在 Inspector 視圖的輸入框時，Scene 會自動標記出該輸入框所對應的位置長度
錨框：除錨點以外的情況都被稱爲錨框，表現在 Scene 視圖上有 線和矩形 兩種
如圖錨框的各種形式
處於錨框時的 UI 元素位置和大小會受其父物體位置和大小的影響
- 同上，下圖中 Anchor 三角標識是美女圖片的 Anchor，並非背景圖的 Anchor
- 錨框模式下，UI 大小位置編輯區以 上下左右邊距 或者 某一軸+（寬或高）+邊距 形式來標記。
需要注意的是，錨框下 Inspector 輸入框內 Left、Right、Top、Bottom 值是指錨框的上下左右四個點到 UI 包圍盒 上下左右 四條邊的垂直距離，而並不是錨框各點到 Pivot 的值
2. Pivot
簡單理解，Pivot 是 UI 元素自身相對於外部的基準點，也是旋轉和縮放的中心點。
Pivot 以 Vector2 表示，其 x 單位長度爲 UI 包圍盒寬度， 其 y 單位長度爲 UI 包圍盒高度，x，y ∈ （-∞ ，+∞）
3. 九宮格
九宮格是一個表格，最上面的一行是橫向四個表頭，最左側一列是豎向四個表頭，橫豎組合形成了右下角部分十六種常用組合模式。
九宮格的意義是方便開發者快速調整 UI 位置，默認情況下只改變 Anchor 值; 按下 Shift 鍵後，UI 的 Pivot 也會相應更改; 按下 Alt 鍵後 UI 相對父物體的位置也會改變。
4. 旋轉縮放
需要注意旋轉和縮放是以 Pivot 爲基準點進行計算的。
5. 兩個小模式
-
藍圖模式（Blueprint Mode）
開啓後，Scene 視圖中 UI 編輯框（這種情況下藍點框不是包圍盒）會忽略旋轉與縮放的影響，表現爲原始UI大小。如果發生旋轉後開啓藍圖模式，拉框調整大小時會有所不同（沿水平或垂直方向調整，而並非 UI 真正的寬高方向調整）。
這種模式比較適合調整旋轉後的 UI 元素，比如商品左上角傾斜的打折或熱賣標籤
-
原始編輯模式（Raw Edit Mode）
分兩種情況使用，Inspector 中位置大小區值不會隨 Anchor、Pivot 改變而改變
- 錨點下修改 Pivot 值，不會改變 Pivot 與 錨點的相對位置。未開啓原始編輯模式時，修改 Pivot 是 Pivot 在動，開啓後則是 Pivot 靜止 UI 移動。
- 錨框下修改 Anchor 值，未被 Anchor 影響的另一邊 Anchor 與 UI 包圍盒邊緣會保持位置相對不變。
歡迎關注公衆號，定期分享Unity的實用技巧~~
