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 控件。为了让文字冒泡的位置始终对准背景图片中的人物头顶,我给文字冒泡的各个控件设置了锚点。

Aspect Ratio Fitter 和 Image_第1张图片

Bubble 即冒泡框相对其父节点 Image(背景图片)设置了锚点,目的是不管 Image 大小如何变化,都要让冒泡框对准背景图片里面人物的头顶。

如果只是依靠 Image 的 Preserve Aspect 属性,那么文字冒泡是无法在 Image 大小改变的时候时刻对准背景图片里的人头的:

Aspect Ratio Fitter 和 Image_第2张图片

这是因为 Preserve Aspect 虽然能保持图片的宽高比,但却并不能保持 Image 的 Rect Transform 的宽高比。然而锚点却是基于父控件的 Rect Transform 的边界来定位的。

在这种情况下就必须给 Image 挂载 Aspect Ratio Fitter,此时 Preserve Aspect 勾不勾都是无所谓的。

Aspect Ratio Fitter 和 Image_第3张图片

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/

你可能感兴趣的:(游戏开发,Unity,UGUI)