聲明：此篇文章是個人學習筆記，并非教程，所以內容可能不夠嚴謹。可作參考，但不保證絕對正確。如果你發現我的文章有什么錯誤，非常歡迎指正，謝謝哦

UI自適應

在學習Canvas Scaler組件之前，先來了解一下UI自適應，UI自適應就是讓我們可以不對每種分辨率的屏幕上都設計一種UI布局，而只需要在開發的時候設計一種UI布局，就可以讓UI在不同分辨率的屏幕上都能盡量正常的顯示，這將會節省巨大的工作量。

而這一次要學習的Canvas Scaler組件就是用來快速的實現UI自適應功能的組件。

Canvas Scaler組件

官方文檔：https://docs.unity3d.com/cn/current/Manual/script-CanvasScaler.html

畫布縮放器組件用于控制畫布中 UI 元素的整體縮放和像素密度。此縮放會影響畫布下的所有內容，包括字體大小和圖像邊框。我們可以利用該組件去縮放全部UI元素從而適配不同分辨率的屏幕。

Canvas Scaler組件有三種模式，依次介紹

屬性功能

UI Scale Mode	縮放模式
Constant Pixel Size	無論屏幕大小如何，UI 元素都保持相同的像素大小。
Scale With Screen Size	屏幕越大，UI 元素越大。常用來設置UI自適應。
Constant Physical Size	無論屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。

第一種模式 Constant Pixel Size

這個模式也是在Canvas在沒有附加任何Canvas scaler情況下的默認功能。但是，借助Canvas Scaler中的“Scale Factor”屬性，可以自由設定UI元素縮放的比例。

在這種模式下，錨點如果采用“矩形模式”（我自己取得名字）就會呈現一種在Rect Transform中提到的縮放效果，不過看起來挺奇怪的

在這種模式下，錨點如果采用“點模式”（還是我自己取得名字）也依然會按照在Rect Transform中提到的固定效果。但需要注意的是，這個時候UI元素的效果就會像該元素的名字一樣，保持像素大小不變，不管屏幕大小如何變動。

屬性功能

Scale Factor	按此系數縮放畫布中的所有 UI 元素，即這個數是全部UI元素的縮放比例。
Reference Pixels Per Unit	如果精靈具有此“Pixels Per Unit”設置，則精靈中的每個像素將覆蓋 UI 中的一個單位。

在Constant Pixel Size模式下，用代碼實現UI自適應

在這種模式下，不管屏幕大小如何變化，UI元素會保持原大小不變。但是我們可以通過Scale Factor去縮小放大這些UI元素，縮放是按照UI元素原比例進行縮放，所以要實現UI自適應關鍵是確定Scale Factor設為多大值。

可以看出，當屏幕尺寸發生變化時，UI元素無非是太寬，太長或者既太寬又太長而造成重疊。

通常屏幕尺寸變化要同時考慮寬、高兩邊的變化。但是我們只能設置一個縮放比例Scale Factor。因此要實現能用的UI自適應就要在這個系數上面做文章。

為了便于理解，先只考慮一側的變化，這里拿寬度舉例。

1.首先所有的UI元素的錨點要為“點模式”（可以將錨點放在四個角之一，這樣UI元素距離四個角的距離不變），這樣所有UI元素才能統一實現原比例顯示。

2.在代碼中將“運行時的屏幕寬度”除以“編輯時的屏幕寬度”，將Scale Factor的值設為該值，從而讓所有UI元素縮放相應倍數。為了方便觀察我把自適應代碼放在了Update函數，實際上只需要放在Start函數中，運行一次即可。

void Start(){canvasScaler = GetComponent<CanvasScaler>();}// Update is called once per framevoid Update(){//獲取運行時的屏幕分辨率screenWidth = UnityEngine.Screen.width;screenHeight = UnityEngine.Screen.height;//編輯時屏幕分辨率為650x400//將ScaleFactor設為 實際屏幕寬度/編輯時屏幕寬度canvasScaler.scaleFactor = screenWidth / 650;}

效果：當屏幕寬度隨意變化，UI元素能隨之按比例縮放。但當屏幕高度變化時，UI無變化,有可能會發生UI元素重疊的情況。
當同時考慮寬和高的變化時，可以有很多方案。這里記錄三種：

方案一：按寬高權重大小決定最終縮放效果

方案邏輯：

分別計算出寬高的縮放比例，再根據權重來分配寬縮放比例、高縮放比例對最終效果的影響程度。

這個方案可以選擇寬、高的縮放分別對最終結果的影響大小。

void Update(){//獲取運行時的屏幕分辨率screenWidth = UnityEngine.Screen.width;screenHeight = UnityEngine.Screen.height; //總之，應當隨下面兩個浮點數的較小那個變化float w = screenWidth / 650;float h = screenHeight / 400;//編輯時屏幕分辨率為650x400canvasScaler.scaleFactor = propotion * h + (1 - propotion) * w;}

效果：當propotion為0時，只有寬度會影響UI縮放，高度不影響。當propotion為1時，只有高度會影響UI縮放，寬度不會。而propotion在0~1之間時，寬高按權重影響UI縮放。在某些分辨率下也會出現UI重疊的情況。
效果圖

方案二 ：按縮放比例較小的那一側縮放：

方案邏輯：

1.如果高、寬兩側中有一側縮小一側放大，那么就取縮小那一側的值

2.如果高、寬兩側都縮小，那么就取縮小程度較大的那一側的值

3.如果高、寬兩側都放大，那么就取放大程度較小的那一側的值

總之就取 實際屏幕高/編輯時屏幕高 實際屏幕寬/編輯時屏幕寬 較小的那個值

代碼：為了更好觀察才放在了Update函數中，實際上只需要放在Start函數中，運行一次即可。

void Update(){//獲取運行時的屏幕分辨率screenWidth = UnityEngine.Screen.width;screenHeight = UnityEngine.Screen.height; //總之，應當隨下面兩個浮點數的較小那個變化float w = screenWidth / 650;float h = screenHeight / 400;//編輯時屏幕分辨率為650x400if (w < h)canvasScaler.scaleFactor = w;elsecanvasScaler.scaleFactor = h;}

效果：當屏幕寬度隨意變化，UI元素能隨之按比例縮放，UI不會發生重疊。但如果有背景UI，就會發現當屏幕大小發生變化時，如果寬高變化率不同就會相比原來多擴展（expand）出一部分空白（下圖呈黑色）。

方案三：按縮小比例較大的那一側縮放

方案邏輯：

1.如果高、寬兩側中有一側縮小一側放大，那么就取放大那一側的值

2.如果高、寬兩側都縮小，那么就取縮小程度較小的那一側的值

3.如果高、寬兩側都放大，那么就取放大程度較大的那一側的值

總之就取 實際屏幕高/編輯時屏幕高 實際屏幕寬/編輯時屏幕寬 較大的那個值

代碼：為了更好觀察才放在了Update函數中，實際上只需要放在Start函數中，運行一次即可。

void Update(){//獲取運行時的屏幕分辨率screenWidth = UnityEngine.Screen.width;screenHeight = UnityEngine.Screen.height; //總之，應當隨下面兩個浮點數的較小那個變化float w = screenWidth / 650;float h = screenHeight / 400;//編輯時屏幕分辨率為650x400if (w > h) //只需要把這里的<改成>canvasScaler.scaleFactor = w;elsecanvasScaler.scaleFactor = h;}

效果：在一定程度上能夠自適應，但是會出現UI元素重疊的情況.如果有背景UI就可以發現，隨屏幕變化背景UI會出現裁剪的情況。
效果圖

三種方案的總結:

方案一：可以通過調整權重，來影響在不同分辨率屏幕的效果。最終可以通過不斷調整數值選擇一種在所有已知的分辨率里面平均效果不錯的權重。

方案二：在所有分辨率里面UI均不會重疊，可以自動縮放。但是可能會在某些分辨率下的效果不好，比如縮得太小。

方案三：在寬、高變化程度差不多得情況下得效果和方案二差不多，但是有一點點視覺上得區別。不適合寬高比例變化程度差異很大得情況。

這三種方案并不需要手寫代碼，可以直接設置，怎么設置看下面。

第二種模式 Scale With Screen Size

屬性功能

Reference Resolution	參考分辨率/編輯時的分辨率/設計UI布局時的分辨率。最好在每次項目開始時就設置好。
Screen Match Mode	當實際分辨率與參考分辨率（Reference Resolution）不同時，縮放畫布的模式。這個屬性就是用來直接設置上面那三種方案的。 Match Width or Height 僅以寬度或高度或按二者的某種權重比值對畫布進行縮放，這一項和上面的方案一類似，但是效果有些差異，估計是計算方法有異，權重具體看Match屬性。 Expand 水平和垂直方向都會縮放，經過測試，此項效果和上面的方案二效果一模一樣。 Shrink 經過測試，此項效果和上面的方案三效果一模一樣。 偶然間發現自己上面手寫的三個方案的代碼功能竟然和這里一樣，所以我有理由猜測這個模式是基于Constant Pixels Size模式寫出來的，或者二者有同樣的父類？ 這三種模式的特點上面已經說過了，估計實際項目中要根據上線平臺的屏幕分辨率多多嘗試，看哪個效果更好就選哪個。
Match	當Match移到最左邊時，僅寬度變化會影響畫布縮放，當Match移到最右邊時，僅高度會影響畫布縮放。當Match移到中間某個點時，按二者的權重對畫布進行縮放。
Reference Pixels Per Unit	如果精靈具有此“Pixels Per Unit”設置，則精靈中的每個像素將覆蓋 UI 中的一個單位。

第三種模式：Constant Physical Size

這種模式看起來就感覺不常用，先不過多研究，等涉及到的時候再回過頭來看看。

屬性功能

Physical Unit	用于指定位置和大小的物理單位。；centimeter 厘米；millimeter 毫米；inche 英寸；Point 點；pica 派卡
Fallback Screen DPI	在屏幕 DPI 未知時采用的 DPI。
Default Sprite DPI	用于精靈的每英寸像素，使其“Pixels Per Unit”設置與“Reference Pixels Per Unit”設置匹配。
Reference Pixels Per Unit	如果精靈具有此“Pixels Per Unit”設置，則其 DPI 將與“Default Sprite DPI”設置匹配。

總結

以上是生活随笔為你收集整理的【Unity学习笔记】Canvas Scaler组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。