RectTransform繼承自Transform,用於描述矩形的坐標(Position),尺寸(Size),錨點(anchor)和中心點(pivot)等信息,每個2D布局下的元素都會自動生成該組件。當我們在處理UI組件時,往往容易混淆localPosition與anchoredPosition(3D)的概念和用法,以下對上述兩個概念做一些解析和說明。注:不管是localPosition還是anchoredPosition(3D),以下都只在2D布局下進行說明,即只體現x軸與y軸的坐標,z軸坐標忽略。
先描述兩個概念:
1.中心點(Pivot):是矩形旋轉的軸心點的位置,Pivot值可(0,0)到(1,1)進行調整,(0,0)表示矩形自身左下角位置,(1,1)右上角位置。中心點描述的是矩形自身內部的屬性。
2.錨點(Anchors):在場景視圖中表現為4個三角圖形,4個錨分別對應矩形的4個頂點。矩形自身不變的情況下,當錨點定位確定后,每個錨與矩形頂點之間的相對位置是不變的(錨與頂點之間的連線可以想象成一根固定的木棍),這樣即確定了對應矩形頂點與其父節點的相對位置關系。Anchors值Min和Max,分別表示左下錨點和右上錨點的位置。錨點描述的是矩形與父節點的關系屬性。
開始我們的測試:
先確定兩個矩形。父親:白底矩形,大小200x200。孩子:紅底矩形,大小100x100。當前兩個矩形中心點(Pivot)都是(0.5,0.5),錨點(Anchors)重合(0.5,0.5)。
此時的子矩形的localPosition與anchoredPosition值(以下簡稱為測試目標值)為localPosition:(0.0, 0.0, 0.0) anchoredPosition:(0.0, 0.0) 。
測試1:父親不變,孩子錨點(Anchors)設置為父親矩形左上角。此時測試目標值為localPosition:(0.0, 0.0, 0.0) anchoredPosition:(100.0, -100.0) 。
測試2:父親不變,孩子錨點(Anchors)設置為父親矩形邊右中心。此時測試目標值為localPosition:(0.0, 0.0, 0.0) anchoredPosition:(-100.0, 0.0) 。
測試3:父親不變,孩子錨點(Anchors)設置為父親矩形左下頂點和右下頂點。此時測試目標值為localPosition:(0.0, 0.0, 0.0) anchoredPosition:(0.0, 100.0) 。
測試小結1:localPosition與自身錨點無關。anchoredPosition會隨錨點的設置不同而改變。
測試4:父親不變,孩子錨點不變(以最開始錨點在矩形中央為基准,后省略),孩子中心點設置為左下角位置(0,0)。測試目標值為localPosition:(-50.0, -50.0, 0.0) anchoredPosition:(-50.0, -50.0) 。注:圖中孩子中心點已與孩子矩形左下頂點重合。
測試5:父親不變,孩子中心點設置為矩形右邊中心位置(1,0.5)。測試目標值為localPosition:(50.0, 0.0, 0.0) anchoredPosition:(50.0, 0.0) 。
測試小結2:localPosition與自身中心點應該有關系。anchoredPosition也會隨中心點改變而變化。
測試6:父親中心點設置為左下角位置(0,0),孩子不變。測試目標值為localPosition:(100.0, 100.0, 0.0) anchoredPosition:(0.0, 0.0) 。
測試7:父親中心點設置為矩形上邊中心位置(0.5,1),孩子不變。測試目標值為localPosition:(0.0, -100.0, 0.0) anchoredPosition:(0.0, 0.0) 。
測試小結3:localPosition與父矩形中心點也有關系。而anchoredPosition不隨父節點中心點變化而變化。綜合小結1和2,localPosition與自身的中心點(Pivot)和父節點矩形的中心點(Pivot)有關,通過上述值可以嘗試得出,localPosition為自身中心點(Pivot)到父節點矩形中心點(Pivot)的相對位置。可以驗證一下:
測試8:父親中心點設置為矩形右邊中心位置(1,0.5),孩子中心點設置為矩形左上位置(0,1)。測試目標值為localPosition:(-150.0, 50.0, 0.0) anchoredPosition:(-50.0, 50.0) 。完成測試小結3中的驗證。
結論1:localPosition為自身矩形中心點(Pivot)與其父節點矩形中心點(Pivot)的相對位置坐標,與自身錨點(Anchors)無關。
猜想:由測試小結1,2,3得出了anchoredPosition與自身中心點(Pivot)及錨點(Anchors)有關,而與父節點無關。那么anchoredPosition描述的會不會是中心點(Pivot)與錨點(Anchors)之間的位置關系?測試1和測試2的結果確實可以看出anchoredPosition為中心點到錨點的相對位置坐標,但上述測試錨點為重合情況。如測試3的中錨點不重合情況,又該如何理解呢?4個錨點可以構成一個矩形,那anchoredPosition會不會是矩形中心點與與錨點中心點之間的相對坐標?測試1,2,3符合anchoredPosition與中心點與左下錨點的猜想。我們繼續測試驗證:
測試9:父親不變,孩子中心點不變,4個錨點分別為父矩形4個頂點。測試目標值為localPosition:(0.0, 0.0, 0.0) anchoredPosition:(0.0, 0.0) 。
測試10:父親不變,孩子中心點不變,4個錨點調整為下圖所示。測試目標值為localPosition:(0.0, 0.0, 0.0) anchoredPosition:(75.0, -75.0) 。
測試小結4:上述驗證測試也符合anchoredPosition為矩形中心點與與錨點中心點之間的相對坐標猜想。
結論2:anchoredPosition為矩形中心點與與錨點中心點之間的相對坐標。
總結:localPosition為自身矩形中心點(Pivot)與其父節點矩形中心點(Pivot)的相對位置坐標,與自身錨點(Anchors)無關。anchoredPosition為矩形中心點(Pivot)與與錨點中心點之間的相對坐標,與父節點無關。