Aspect Ratio Fitter 和 Image

UGUI 裏面 Aspect Ratio Fitter 的作用是保持一個 UI 控件的寬高比。然而 Image 自身就有一個 Preserve Aspect 屬性用於保持自己的寬高比。因此起初我就想 Image 是不是就用不上 Aspect Ratio Fitter 了,或者說 Image 自身的 Perserve Aspect 的屬性是不是多餘的。後來發現並不完全是。

前段時間遇到一種情況必須要使用 Aspect Ratio Fitter 。

在下圖中,Bubble、Text 和 Text (1) 是文字冒泡的 UI 控件。爲了讓文字冒泡的位置始終對準背景圖片中的人物頭頂,我給文字冒泡的各個控件設置了錨點。


Bubble 即冒泡框相對其父節點 Image(背景圖片)設置了錨點,目的是不管 Image 大小如何變化,都要讓冒泡框對準背景圖片裏面人物的頭頂。

如果只是依靠 Image 的 Preserve Aspect 屬性,那麼文字冒泡是無法在 Image 大小改變的時候時刻對準背景圖片裏的人頭的:


這是因爲 Preserve Aspect 雖然能保持圖片的寬高比,但卻並不能保持 Image 的 Rect Transform 的寬高比。然而錨點卻是基於父控件的 Rect Transform 的邊界來定位的。

在這種情況下就必須給 Image 掛載 Aspect Ratio Fitter,此時 Preserve Aspect 勾不勾都是無所謂的。


Image 掛載了 Aspect Ratio Fitter 後就可以保持 Rect Transform 的寬高比,從而讓文字冒泡時刻對準圖片裏的人頭。

Preserve Aspect 的意義主要在於遊戲開發者不用關心圖片寬高比的具體數值,以及寬高比保持的方式。畢竟使用 Aspect Ratio Fitter 的話,開發者不但要填入具體的寬高比數值,而且要決定控件要如何保持寬高比——是高度固定,還是寬度固定,還是儘可能被包含在父控件區域內,等等。

Unity版本:2017.3.1f1

本文在我的獨立博客上的地址:http://zxtechart.com/2018/04/10/aspect-ratio-fitter-and-image/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章