金慶的專(zhuān)欄

Canvas Scaler 的3種模式

(金慶的專(zhuān)欄 2021.3)

參考：
https://wenku.baidu.com/view/83991090336c1eb91b375db8.html

Unity Canvas 有個(gè) Canvas Scaler 組件，用來(lái)決定 Canvas 的 Scale(縮放)值。
Scale 有 X,Y,Z 3個(gè)分量，都是同一值，即在各個(gè)方向上都是同倍率縮放的。
它有3種Scale Mode。

因?yàn)樵O(shè)計(jì)時(shí)的寬高比與目標(biāo)機(jī)型寬高比不同，Canvas 需要先增減為目標(biāo)高寬比，然后再縮放。
Canvas 縮放并不影響UI元素的相互位置，只是同比縮放。
但是高寬比調(diào)整時(shí)會(huì)造成UI元素的相對(duì)位置變化，如寬度增大后，UI元素會(huì)在寬度方向上相互散開(kāi)。

可以在 Unity Editor Game 頁(yè)左上角分辨率下拉菜單中創(chuàng)建幾個(gè)低分辨率屏，用來(lái)測(cè)試屏幕大小切換。
測(cè)試界面可放置2個(gè)按鈕，一個(gè)錨定到左上，位于左上，一個(gè)錨定到右下，位于右下，不要strech。

3種模式如下。

## Constance Pixel Size

Constance Pixel Size 模式下，Scale 總是為1。
目標(biāo)機(jī)上的 Canvas 就是其分辨率大小。
因?yàn)樵O(shè)計(jì)時(shí)分辨率與實(shí)際分辨率不同，顯示會(huì)不同。
但是圖片和按鈕的大小保持固定像素大小。
如果屏幕變大，UI元素就會(huì)相互散開(kāi)，變小則聚攏。
如果需要縮放，只能通過(guò)程序調(diào)節(jié)。

## Scale With Screen Size

隨屏幕大小縮放。
該模式下有個(gè) Reference Resolution (參考分辨率)，應(yīng)該設(shè)為主流機(jī)型的分辨率。
在主流機(jī)型下，Scale 為1，與設(shè)計(jì)顯示相同。

https://blog.csdn.net/u011948420/article/details/112641308
2020中國(guó)移動(dòng)游戲質(zhì)量白皮書(shū)-WeTest 報(bào)告 Android 手機(jī) TOP300 分辨率為 2340*1080 占 31%。

如果目標(biāo)機(jī)型為 4680*2160，則 Scale 正好為2；如果目標(biāo)機(jī)型為 1179*540，則Scale為0.5.

一般情況下寬高比不同，此時(shí)Scale算法有3種，即3種Sceen Match Mode：

### Match Width Or Height

匹配寬度或高度。

此時(shí)有個(gè) Match 劃動(dòng)條，可以在 Width(0)..Height(1)之間。
如果為0，匹配寬度，則 Scale 為目標(biāo)屏寬與參考屏寬之比；
如果為1，匹配高度，則 Scale 為目標(biāo)屏高與參考屏高之比；
如果為0.5, 加權(quán)匹配，則是這2個(gè)比值的平均值。

匹配寬度時(shí)，高度方向上會(huì)有UI擴(kuò)散或聚攏。
匹配高度時(shí)，寬度方向上會(huì)有UI擴(kuò)散或聚攏。
加權(quán)匹配時(shí)，UI在高上擴(kuò)散寬上聚攏，或者在高上聚攏寬上擴(kuò)散。

### Expand

增加。先增加寬或高到目標(biāo)寬高比。該增加方向UI元素會(huì)散開(kāi)。

### Shrink

減少。先減少寬或高到目標(biāo)寬高比。該減少方向UI元素會(huì)聚攏。

## Constant Physical Size

固定物理大小。
隨著4k屏的出現(xiàn)，屏幕DPI會(huì)很大，許多設(shè)備的像素點(diǎn)非常小。
同樣的按鈕，在高DPI下，如果固定像素大小，則會(huì)非常小，這時(shí)適合用該模式。