UGUI RectTranstrom錨點和座標系

轉自：http://www.jianshu.com/p/ebce72240d6c

錨點相對關係

錨點是我們用來確定UI元素的位置的，當然這個錨點是相對離自己最近的父類而言的，子類的錨點和父類的錨點是關係的，而是以父類的UI爲基礎的，這一點看文字不好看懂，下邊我們用幾個圖來說明

Paste_Image.png

這四個點就是該Image的錨點，而該圖片的大小和錨點是不一樣的大小，這個要怎麼調我們下邊會講解，大家不要着急，下邊我們在該Image下創建一個子物體，然後把他的錨點設置爲平鋪在父物體上

Paste_Image.png

該選項就是平鋪到父物體身上

Paste_Image.png

我們此時觀察該物體的錨點，平鋪到父物體身上，剛開始我的理解就是他應該和父物體的錨點對齊，但是後來發現自己錯了，他應該是和父物體對齊，以父物體的大小爲基準，我們看這張圖和第一張記性比較下我們就能看到。

Pivot

這個也可以叫做錨點，但是感覺不是太貼切，他的作用是該物體的所有變化，比如旋轉，縮放都是以該點爲基準點，（Pivot也是以該物體的大小爲基準 ），該值 X,Y都是取值範圍是從0到1，默認爲0.5，就是中心點

Paste_Image.png

這個點就是Pivot點，我們旋轉試一下

若水GIF截圖_2016年12月25日10點52分1秒.gif

下邊我們把Pivot點調到坐下角，X=0，Y=0，我們再去旋轉

縮放大家可以自己去試下。

Anchors

手動錨點

Paste_Image.png

我們先看下這個，因爲錨點這個東西都是以矩形的方式的情況出現的，而這裏邊有4個參數需要我們填，我們在看幾個參數的時候不要橫着看（Min X看到Y），要豎着看這兩個X值是確定這個Anchores在X方向的最小值和最大值，兩個Y值確定Y方向的的最大值最小值，這樣我們就可以確定一個矩形了（記住，不管你是手動拖錨點還是通過數值改錨點，最終都是組成一個矩形）有的時候可能不小心把Min的X值調的比Max的X值都大，這個在圖中會顯示，但是運行不了，而且我們通過手動拖動錨點就根本不會出現這種情況

若水GIF截圖_2016年12月25日11點11分22秒.gif

這個就是手動拖動錨點。

自動錨點

Paste_Image.png

這個就是自動錨點，我們可以點開它然後選擇不同的對齊方式，這個問題我們要注意幾個問題

Paste_Image.png

上圖我紅框圈起來的都是我們可以選擇的錨點方式，細心點會發現有的是一個點，有個是兩個點，這就是我們在選擇該錨點方式的時候，錨點的分佈方案，我們選擇不同的錨點方式的時候，該UI元素的大小怎麼去調節，也是有區別的。

Paste_Image.png

我們先隨便選擇一個點的錨點方式，這種分佈方式代表四個錨點都是在一個地方我們通過Anchors裏的參數也可以看出來

Paste_Image.png

圖更直觀點，接下來我們怎麼去調節該圖片的大小呢

• PosX，Y 該圖片的Pivot點距離錨點的距離，通過這兩個調節圖片的位置
• width height，通過這兩個調節該圖片的大小

Paste_Image.png

我們再選擇有兩個點的錨點分佈方式，我們可以注意下下邊Anchors值，X值是一樣的，Y值不一樣

Paste_Image.png

我們發現描點分佈方式框後邊有幾個參數也發生了變化

• Posx 表示Pivot點距離錨點X方向的值（因爲他的X值是一樣的）
• Top Bottom我們可以通過這兩個值來改變該圖片的高度
• Width 該圖片的寬度
  當然其他的兩個點的錨點分佈方式還有好多，參數可能也不一樣，大家可以自己去看下。

Paste_Image.png

這種是四個點的錨點分佈方式，我們通過下圖可以看的直觀些

我們注意後邊紅線圈的幾個參數
Left，Right，Top，Bottom這幾個表示該圖片離錨點所繪製的邊框上下左右的距離。

小結

• Posx，y這種參數一般出現在四個錨點組成了一個點或者是一條線的情況下，Pivot點距離該點或者該線的距離。該參數在錨點組成一條線的情況下，只會出現一個。
• Width，Height這種參數出現在四個錨點組成了一個點或者是一條線的情況下，表示該圖片的寬度和高度。該參數在錨點組成一條線的情況下，只會出現一個。該值改變是以Pivot爲基礎的。
• Left，Right,Top,Right這種參數會出現在四個錨點組成了一個矩形，表示該圖片的某個邊緣，距離錨點組成的圖形的邊緣的距離，有正負之分，在範圍以內是正值，邊框外爲負值。四個錨點組成一條線的時候，是Y方向的線的時候，會出現Top和Bottom兩個選項，表示距離該錨點Y值最大值和最小值的距離。是X方向的線的時候，會出現Left和Right兩個選項，表示距離該錨點X值最大值和最小值的距離。
  語文不好，上邊的幾個參數經常混合出現，解釋的有些不到位，大家可以根據上邊的解釋測試下，就會完全理解了，如果還不理解，可以簡信。

RectTransform

當錨點在中心的時候，我們在上邊提到的PosX，Y，Z,這個我們也可以理解爲座標系，但是這個座標系和世界座標系是不一樣的，我們暫且理解爲UI座標系，UI座標系的朝向跟世界座標系是一樣的，但是UI座標系的距離和世界座標系是不一樣的

 //獲取UI座標系的2D座標，就是X,Y值
 GetComponent<RectTransform>().anchoredPosition;
 //獲取UI座標系的3D座標，
 GetComponent<RectTransform>().anchoredPosition3D;
//獲取該UI在世界座標系的3D座標
 GetComponent<RectTransform>().position;
 //和上一個值是一樣的是世界座標系
 transform.position;
 //和世界座標系transform.up是一樣的，都是單位長度
 GetComponent<RectTransform>().up;

有的時候這個rectTransform還有其他的和transform的其他一些方法，