Unity4.6版本開始才有了新的UI系統UGUI
一.Canvas的組件介紹
1.Canvas
Canvas是UGUI最根本的元素，它是一個區(qū)域（畫布）用來容納所有UI元素的拂封，UI元素必須是它的子物體茬射，才能顯示出來！
Canvas的三種渲染模式（Render Mode）
-
Screen Space - Overlay ： UI元素在所有3D物體之上
這種模式下攝像機可有可無冒签，UI元素仍然能夠顯示在抛；如果有攝像機，UI元素絕對是顯示于所有3D物體之上的萧恕，不會被遮擋刚梭！
Pixel：是否像素對齊以及排序
Sort Order：數字越大的Canvas顯示在前
-
Screen Space - Camera：UI元素位置和攝像機有關，離攝像機前面有一定距離票唆，
這種模式下沒有攝像機的話朴读，和第一種效果一樣（如下圖，它會提示你要指定一個攝像機）走趋；指定攝像機后衅金，3D物體就可以顯示在UI元素的前面，需要先調Plane Distance（Canvas與攝像機的距離）簿煌，然后在調3D物體的位置典挑，讓它處于攝像機與Canvas之間，就可以顯示于UI元素之上
Plane Distance：單位是米
Sorting Layer：位于下面的選項顯示在前啦吧，顯示位置優(yōu)先由這個選項決定您觉，如果選項一樣，再由Z軸決定授滓，同Layer還可調Order in Layer來調顯示順序
- World Space ： 純三維UI琳水，Canvas可以隨意旋轉移動肆糕，和3D物體一樣
2.Canvas Scale
主要用來控制UI界面中，Canvas的縮放在孝，當屏幕分辨率和我們設計分辨率不一樣的時候诚啃，如何縮放我們的Canvas
Scale Factor：縮放的倍數，如果原先圖片的像素是800×600私沮，把這個參數調成2圖片大小就會變成1600×1200始赎，一般默認為1，即圖片初始大小仔燕，不更改造垛。
Reference Pixels Per：1米代表多少個像素，一般默認為100晰搀，1米=100像素五辽，不更改
Canvas的三種縮放模式（UI Scale Mode）
-
Constant Pixel Size（比較少用）：像素大小是常量，也就是說外恕，無論屏幕大小怎么變化杆逗，UI元素都不會變化
image.png Scale With Screen Size（最常用）：按照參照分辨率進行等比縮放
首先要設置好參照的分辨率 Reference Resolution，這個美工會定好這套UI是按照哪種分辨率來進行設計的鳞疲，比如說800*600罪郊，填上去就完事了
Screen Match Mode：屏幕匹配模式，當屏幕大小與參照分辨率不一致時尚洽，調整此參數可以調整UI元素在當前屏幕的縮放比例悔橄，防止UI元素顯示不全，有以下三個選項
Match Width Or Height：有拖動條翎朱，最大0橄维，最小1，內容的寬除以設計的寬拴曲，內容的高除以設計的高
Expand：等于第一個選項的0值争舞，UI元素等比例縮小，屏幕可能會留空澈灼，也就是縮小到尺寸和參照分辨率一致竞川，讓內容不超出屏幕
Shrink：等于第一個選項的1值，UI元素等比例放大直至填充屏幕留空位置叁熔，也就是放大到尺寸和屏幕一致委乌，讓屏幕不留空
2.RectTransform
RectTransform繼承自Transform，是所有UI元素都有的組件荣回，由于是平面的遭贸，Scale的z軸是沒有用，而Rotation的y有用心软，一般用來做3D效果的UI
Pivot：中心點壕吹，可以設置UI元素中心點的位置著蛙，中心點是一個藍色圓環(huán)形狀
Anchors：錨點，它是以自身UI元素的父容器為基準的耳贬，錨點不能移出父容器區(qū)域外踏堡，由4個三角形組合成
UGUI的坐標系：
錨點的兩種情況：
- 讓我們來看第一種情況，錨點是合在一起的咒劲，即４個三角形頂點相對顷蟆，UI元素可以根據錨點移動
PS：這個錨點和中心點是白色圖片的，圖片的父物體是一個Panel
image.png
這種情況下腐魂，設置圖片的位置帐偎，它會以自身錨點的位置為原點，以中心點為基準來進行偏移挤渔，比如把圖片位置設置為0肮街，那么圖片中心點會與錨點重合
也就是說风题，錨點在哪里判导，中心點根據錨點位置通過設置Pos X Pos Y來移動
- 接下來是第二種情況，錨點是分開的沛硅，可以是４個三角形分開眼刃，可以是兩兩組合
這種是兩兩組合：上下是粘連在一起的，左右分離摇肌，此時寬度由錨點決定擂红，通過設置Left和Right，而高度依然是由Height來設置
image.png
把Left围小、Right昵骤、Pos Y 依次歸零會發(fā)現，圖片的左邊會和左邊的錨點對齊,也就是圖片的左邊與錨點的間距為0個像素肯适，右邊會和右邊的錨點對齊变秦，也就是圖片的右邊與錨點的間距為0個像素，y歸0后框舔，中心點所在的水平線會和錨點所在的水平線對齊.
image.png
那么另一種兩兩組合的情況也是一樣的：左右粘連蹦玫，上下分離，此時高度由錨點決定刘绣，通過設置Top和Bottom樱溉，意思就是上邊距離上錨點的距離，下邊距離下錨點的距離纬凤，而寬度依然是由Width來設置.
如果是4個三角形都分開的情況呢福贞？相信各位都知道怎么回事了吧，那么就是變成Left停士、Right挖帘、Top绢馍、Bottom，而這是4個值和上面的沒有區(qū)別肠套，都是一樣的意思舰涌；此時圖片的位置x，y軸都由錨點的位置來決定你稚，圖片的寬瓷耙，高則由4個錨點的之間的距離來決定，那么中心點就沒有那么重要了刁赖，這4個值的單位是像素
