細說UGUI中Anchor和Pivot(一)

背景

相信剛接觸UGUI的時候,這套新系統中RectTransform裏的position,anchor,pivot一定讓大家有點迷糊不適應吧。因此就想詳細介紹一下這幾個概念,之所以標題中沒有提position,是因爲主要還是以介紹Anchor和Pivot爲主,position會帶過介紹

概念

錨點Anchor

Anchor就是一個RectTransform相對於其父節點在父節點中固定的幾個參考點。可能我的表述還不是很到位。所以分成幾點來說明

  1. 父節點
    錨點在從屬結構上,是屬於子RectTransform對象,是其中的一種屬性,但是其取值範圍是位於父節點的,也就是說,整個父節點的Rect的範圍,都是anchor的取值範圍(在編輯器中拖動錨點可以直觀的看到)

  2. 固定的參考點
    錨點是一種定位的參考點,子對象以錨點爲參考點,並相對於錨點進行定位。而錨點一旦設定,其位置相對與父節點是固定的,因此,子對象也就能相對於父節點進行定位了

  3. 值範圍
    錨點取值在[0,1]之間,是一個比例值,這個比例值,是以父節點的width,和height來進行比例計算的,比如其值爲1的話,是指父節點Rect的width的最遠點,或是height的最高點

我們可以這樣理解,假設我們將Rect中心點作爲一個參考點,錨點代表了Rect自身相對於父節點的位置

軸點Pivot

軸點是Rect的實際中心點,和Rect尺寸中心點不同。尺寸中心點是以寬,高取1/2得到。而軸點是可以任意指定的,如果將Rect旋轉,可以看到Rect是圍繞軸點旋轉,而不是中心點。軸點是範圍也是[0,1]的比例值。軸點是屬於Rect自身的。

我們這樣理解,假設我們將Rect中心點來作爲一個參考點的話,軸點代表了Rect相對於自身的偏移

anchoredPosition

當4個錨點三角合攏在一起的時候,錨點位置就是此時4點合攏的位置。而當4個錨點三角分開的時候,錨點用來計算anchoredPosition的位置是有4個錨點位置分別和軸點做插值計算,unity文檔是這麼說,我個人理解應該是將anchor的min,max經過關於軸點的插值結算,來得到一個新的點,這個新的點和pivot之間的相對距離就是anchoredPosition。

從上面軸點和錨點的概念介紹,在結合anchoredPosition的概念,我們就可以知道anchoredPosition的相對距離,實際上就表明了子Rect以Pivot爲原點時,相對於父節點的偏移。在計算子節點的位置偏移時,永遠是拿軸點而不是中心點來作爲參考點的

子Rect的位置計算

(一)我們先假設父Rect,子Rect的軸點都在中心(0.5,0.5)的位置,4個錨點也在這個位置合攏。此時,子Rect相對於於父Rect的偏移是(0,0)。如果此時,僅僅是子Rect的軸點發生偏移,那麼子Rect當前的偏移就是

offset_p = 軸點偏移

(二)繼續上一步,如果此時錨點發生了變動(假設錨點還在一起,只是離開了中心位置),那麼此時,Rect當前偏移就是

offset_a = offset_p + 錨點偏移
這裏的錨點偏移就是anchoredPosition,這也是爲什麼設置該值可以改變RectTransform的位置的原因

如果錨點沒有在一起,實際上只是多了一步,計算一個關於Pivot點插值的虛擬的點來代替錨點位置來做偏移計算。

(三)我們繼續,假如此前兩步都是在父Rect在世界座標原點時候完成,那麼如果現在父節點相對與世界座標原點偏移了,那麼Rect當前相對於世界座標原點的偏移就是

offset = offset_a + 世界座標偏移

今天先寫到這裏,老實說這個東西寫清楚似乎要比理解清楚更難,我得整理整理思路,待續

發佈了33 篇原創文章 · 獲贊 31 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章