Canvas子節點中的GameObject的Transform組件會被被RectTransform（下文簡稱rectT）組件所代替，可以看到，除了position，rotation，scale“三巨頭”之外，還有anchors，pivot以及左上角的框框，
他們代表隊是對齊方式，
首先是默認的對齊方式：我們可以看到，左上角的圖示上寫著middle，center，
anchors和pivot都是0.5，這個情況最貼近中學所學的平面直角坐標系：
1.已父節點的中心點為原點
2.坐標為x，y
3.寬高為width和height
合起來就是“以父節點中心點為原點，水平和垂直方向分別偏移x和y像素的位置為中心，生成一個寬高為width和height的矩形”
這個例子中，我們把父節點設為紅色，子節點設為藍色，子節點的坐標設為50,100，可以看到藍色方塊的位置水平方向上往右偏移了50像素，垂直方向上往上偏移了100個像素，
這些都很簡單，來說幾種類似的對齊方式：
我們點開小框框按鈕，里面有9個紅色的，中心的對齊方式為上文介紹的默認對齊方式，
周圍的“八大護法”，理解上也很簡單：
以父節點的“xx”點為原點…（后面的相同）
以左上角的對齊方式為例，就是“以父節點的左上角為原點”
右下角的對齊方式就是“以父節點的右下角為原點”
…以此類推
這里再舉個例子，假如我們把對齊方式調整為“左上角原點”
那么我悶把坐標設為0,0，矩形的中心就會在父節點的左上角了
…這里也非常簡單，
引出一個問題，“假如我要子節點的左上角對齊父節點的左上角該怎么辦？”，子節點的中心點對齊的確很奇怪，不符合常規情況，
這里就要使用我們剛剛所提到的pivot
pivot定義的是子節點的中心，默認的0.5,0.5代表中間，而我們這種情況下需要把左上角當作中心，就需要把值調整為0,1，就是左上角了，
值得一提的小技巧：同時設定pivot
在上面的有一段話:shif: also set pivot
當你在設定的時候按下shift，就會自動生成常用的pivot，上文所說的情況就可以一鍵設定了，
另外，在修改了pivot之后，rotation和sacle的調整也會以新的pivot為中心進行變化，就不貼例子了，有興趣的朋友可以自行設定一下，
然后就是藍色的幾種對齊方式說明：
最簡單，最常用的對齊方式，就是右下角那個十字，
當我們選擇后小圖示的文字會變成strech，strech，
對應點pos和寬高也變成了left，top，right，bottom，
這種對齊方式代表的是子節點每條邊，對到父節點邊上的距離，
全部都是0，就表示和父節點重合，相當于螢屏
假如要用一張圖片當黑底，我們就可以使用這種對齊方式：
無論手機的解析度怎么變化（這也是我們為什么要適配的原因），黑底的大小始終等于螢屏大小，想起有人曾經弄了一個寬高都是99999的圖片當背景…哈哈哈
懂了以上例子之后別的就很好理解了，
舉個例子：這種對齊方式代表“水平方向是以拉伸的方式對齊”，而垂直方向保持原來的坐標系對齊法則，
即“以父節點的頂部中心為原點，垂直方向偏移y像素，高度為height，左右兩邊距離父節點的邊界為left和right的矩形”
實際效果：會隨著橫向變化而拉伸自己，垂直方向始終保持從頂部往下偏移
基本的使用介紹就到這里，那unity內部是如何實作的呢？會在下一篇文章中介紹，
有錯誤歡迎指正，
ps：我們為什么需要適配？以下圖為例，假如右上角的小地圖是以中心為原點進行對齊，那會發生很多奇怪的情況：
螢屏太短看不到；螢屏太長會在中間，擋住視線；解析度太高地圖會很小，解析度太低地圖會很大…
用一套ui解決所有的情況，才是合格的ui仔
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272254.html
標籤：其他