RectTransform的localPosition與anchoredPosition(3D)的區別


RectTransform繼承自Transform,用於描述矩形的坐標(Position),尺寸(Size),錨點(anchor)和中心點(pivot)等信息,每個2D布局下的元素都會自動生成該組件。當我們在處理UI組件時,往往容易混淆localPositionanchoredPosition(3D)的概念和用法,以下對上述兩個概念做一些解析和說明。注:不管是localPosition還是anchoredPosition(3D),以下都只在2D布局下進行說明,即只體現x軸與y軸的坐標,z軸坐標忽略。

先描述兩個概念:

 

   1.中心點(Pivot):是矩形旋轉的軸心點的位置,Pivot值可(0,0)(1,1)進行調整,(0,0)表示矩形自身左下角位置,(1,1)右上角位置。中心點描述的是矩形自身內部的屬性。

 

 

   2.錨點(Anchors):在場景視圖中表現為4個三角圖形,4個錨分別對應矩形的4個頂點。矩形自身不變的情況下,當錨點定位確定后,每個錨與矩形頂點之間的相對位置是不變的(錨與頂點之間的連線可以想象成一根固定的木棍),這樣即確定了對應矩形頂點與其父節點的相對位置關系。AnchorsMinMax,分別表示左下錨點和右上錨點的位置。錨點描述的是矩形與父節點的關系屬性。

開始我們的測試:

 

先確定兩個矩形。父親:白底矩形,大小200x200。孩子:紅底矩形,大小100x100。當前兩個矩形中心點(Pivot)都是(0.5,0.5),錨點(Anchors)重合(0.5,0.5)

此時的子矩形的localPositionanchoredPosition值(以下簡稱為測試目標值)為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)  

 

 

 

 

 

測試小結1localPosition與自身錨點無關。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)  

 

 

 

 

 

測試小結2localPosition與自身中心點應該有關系。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)  

 

 

 

 

 

測試小結3localPosition與父矩形中心點也有關系。而anchoredPosition不隨父節點中心點變化而變化。綜合小結12localPosition與自身的中心點(Pivot)和父節點矩形的中心點(Pivot)有關,通過上述值可以嘗試得出,localPosition為自身中心點(Pivot)到父節點矩形中心點(Pivot)的相對位置。可以驗證一下:

測試8父親中心點設置為矩形右邊中心位置(1,0.5),孩子中心點設置為矩形左上位置(0,1)。測試目標值為localPosition:(-150.0, 50.0, 0.0) anchoredPosition:(-50.0, 50.0)  完成測試小結3中的驗證。

 

 

 

結論1localPosition為自身矩形中心點(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為矩形中心點與與錨點中心點之間的相對坐標猜想。

 

結論2anchoredPosition為矩形中心點與與錨點中心點之間的相對坐標。

 

總結:localPosition為自身矩形中心點(Pivot)與其父節點矩形中心點(Pivot)的相對位置坐標,與自身錨點(Anchors)無關。anchoredPosition為矩形中心點(Pivot)與與錨點中心點之間的相對坐標,與父節點無關。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM