UGUI—深刻理解Canvas Scaler屏幕自適應

前言

在學習Canvas Scaler組件之間，讓咱們先來了解一下什麼是像素、圖片分辨率、屏幕分辨率、像素比以及寬高比。html

像素：像素指的是圖像最小的單位，是獨立的一個色塊(像素點)，一張圖片就是由這些像素點構成的，單位面積內像素點越多，越密集，那麼圖像就會越清晰。canvas

圖片分辨率：圖像分辨率是指每英寸圖像內的像素。圖像分辨率是有單位的，叫像素沒英寸。分辨率越高，像素的點密度越高，圖像越逼真。c#

屏幕分辨率：屏幕所能顯示像素的多少，分辨率1920x1080的意思就是水平方向含有像素數爲1920個，垂直方向像素數爲1080個。屏幕尺寸同樣的狀況下，分辨率越高，顯示效果越精細和細膩。markdown

像素比：是指每一個格子(像素)是方的仍是扁的。1：1就是正方的，4：3是有點扁的，16：9是很扁。app

寬高比(畫面比)：指視頻圖像的寬度和高度之間的比例。ide

注意：oop

實際的屏幕寬高比不必定是分辨率之比，除非像素比是1：1。
實際的屏幕寬高比 = 橫向分辨率x橫向像素長度：縱向分辨率x縱向像素長度。

好比一部電影，分辨率是640 * 360，畫面寬高比是16：9(640:360)，那麼像素比正好是1：1。佈局

Canvas Scaler

Unity官方對於Canvas Scaler的定義是"The Canvas Scaler Component is used for controlling the overall scale and pixel density of UI elements in the Canvas. This scaling effects everything under the Canvas, including font size and image borders"。意思是Canvas Scaler組件用於控制在畫布上全部的UI元素的縮放比例和像素密度。而且這個縮放比例會影響全部在Canvas上面的東西，包括字體大小和圖片邊界。學習

爲了適用不一樣分辨率，咱們可能須要容許適當的UI總體性的縮放，外加一些儘量少的局部微調，這樣能夠達到一個比較理想的效果。Canvas Scaler就是負責該功能的組件。字體

當Canvas的Render Mode爲Screen Space - Overlay或者是Screen Space - Camera時，Canvas Scaler的UI Scale Model有三個選項，分別是:Constant Pixel Size、Scale With Screen Size、Constant Physical Size，以下圖所示：

當Canvas的Render Mode爲World Space時，Canvas Scaler的UI Scale Model只有一個爲Wordl默認選項，且不可更改，以下圖所示：

下面來詳細介紹一下Constant Pixel Size、Scale With Screen Size、Constant Physical Size這三種模式。

UI Scale Mode — Constant Pixel Size

說明: 當屏幕分辨率設置爲1000 * 1000時，建立一個Canvas，再在Canvas裏面添加一張寬高爲100 * 100的圖片。

參數詳解:
- Scale Factor：畫布的縮放比例。默認爲1，表明正常大小。
- Reference Pixels Per Unit：每單位表明的像素量。
當Scale Factor設置爲1時，Canvas的寬高爲1000 * 1000，圖片的寬高爲100 * 100，以下圖所示：
當Scale Factor設置爲2時，Canvas的寬高爲500 * 500，圖片的寬高仍是爲100 * 100，以下圖所示：

總結： 不管屏幕大小如何，UI元素都保持相同的像素大小。使用該模式時，能夠在屏幕上按像素指定UI元素的位置和大小。這也是畫布在未附加任何畫布縮放器時的默認功能。可是藉助畫布縮放器中的」Scale Factor」設置，能夠向畫布中的全部UI元素應用常量縮放。

UI Scale Mode — Scale With Screen Szie

說明當屏幕分辨率設置爲1000 * 1000時，建立一個Canvas，再在Canvas裏面添加一張寬高爲800 * 600的圖片，UI佈局設計分辨率設置爲800 * 600。

參數詳解：
- Reference Resolution: UI佈局的設計分辨率。
- Screen Match Mode - Macth Width Height
  - Match是一個滑條，當Match爲0時，按寬度進行Canvas等比縮放；當Match爲1時，按高度進行Canvas等比縮放。通常狀況下這個值非0即1，不用糾結中間值。
  - 若是屏幕分辨率小於等於設計分辨率時，那麼無論Match的值是多少，Canvas的寬高都爲設計分辨率。此時案例中爲800 * 600.
  - 若是屏幕分辨率大於設計分辨率，那麼當Match爲0時，Canvas的寬爲設計分辨率的寬，高再根據屏幕分辨率計算所得，這種狀況案例中Canvas的寬爲800，高爲800；當match爲1時，Canvas的高爲設計分辨率的高，寬再根據屏幕分辨率計算所得，這種狀況案例中的Canvas的寬爲600，高爲600；
- Screen Match Mode - Expend
  - 當屏幕分辨率小於等於設計分辨率時，那麼此時Canvas的寬高爲設計分辨率800 * 600。
  - 當屏幕分辨率大於設計分辨率時，選擇屏幕分辨率與設計分辨率的寬高差值較小的那個做爲縮放標準，另一個再根據屏幕分辨率進行縮放。案例中，高度差值爲(1000 - 800)200，寬度差值爲(1000 - 600)400,200較小，全部此時案例中Canvas的寬爲800，高再根據屏幕分辨率1：1獲得800。
  - 此舉旨在減小擴大分辨率時因爲非等比擴大而對UI總體佈局形成影響。適合製做較小標準尺寸，擴充到較大屏幕。
- Screen Match Mode - Shrink
  - 和Expend相似，可是更適合縮小的情形。
  - 選擇屏幕分辨率與設計分辨率的寬高差值較大的那個做爲縮放標準，另一個再根據屏幕分辨率進行縮放。案例中，高度差值爲(1000 - 800)200，寬度差值爲(1000 - 600)400,400較大，600，寬再根據屏幕分辨率1：1獲得600。

總結： 屏幕越大，UI元素越大。使用該模式時，能夠根據指定分辨率像素來指定位置和大小，若是當前屏幕的分辨率大於參考分辨率，則畫布會保持參考分辨率，可是會放大以便適應屏幕。若是當前屏幕的分辨率小於參考分辨率，則畫布會相應縮小以適應屏幕。

UI Scale Mode — Constant Physical Size

說明： 與 Constant Pixel Size 模式本質相同， Constant Pixel Size 經過邏輯像素大小調節來維持縮放，Constant Physical Size 經過物理大小調節來維持縮放。使用這種模式必須指定一個像素轉換物理大小的因數，運行時經過具體設備的 DPI 計算最終的 Canvas 像素大小和縮放比例。

參數詳解：
- Physical Unit： 用於指定 UI 位置和大小的物理單位
屬性描述計算中的 targetDPICentimeters釐米2.54Millimeters毫米25.4Inches英寸,約 25.4 毫米1Points點，1/72 英寸，1/12 派卡72Picas派卡，1/6 英寸6
- Fallback Sprite DPI: 若是未獲取到屏幕的DPI，將使用此值參與計算縮放。
- Default Sprite DPI： 與Reference Pixels Per Unit共同計算每單位UI單位像素數。
- Reference Pixels Per Unit： 與Default Sprite DPI共同計算每UI單位像素數。
源碼：

///<summary>
///Handles canvas scaling for a constant physical size.
///</summary>
protected virtual void HandleConstantPhysicalSize()
{
    float dpi = (currentDpi == 0 ? m_FallbackScreenDPI : currentDpi);
    float targetDPI = 1;
    switch (m_PhysicalUnit)
    {
        case Unit.Centimeters: targetDPI = 2.54f; break;
        case Unit.Millimeters: targetDPI = 25.4f; break;
        case Unit.Inches: targetDPI = 1; break;
        case Unit.Points: targetDPI = 72; break;
        case Unit.Picas: targetDPI = 6; break;
    }
    SetScaleFactor(dpi / targetDPI);
    //設置Canvas中每一個單位有多少像素
    SetReferencePixelsPerUnit(m_ReferencePixelsPerUnit * targetDPI / m_DefaultSpriteDPI);
}
複製代碼

總結： 不管屏幕大小和分辨率如何，UI元素都保持相同的物理大小。使用該模式時，能夠在屏幕上按照物理單位指定UI元素的位置和大小。此模式要求設備正確報告其屏幕DPI(分辨率)。對於不報告DPI的設備，能夠指定回退DPI

引用參考

# Unity關於像素,Camera大小,以及分辨率的研究

# 自適應神器

# Unity UGUI-Canvas Scaler總結

# ugui源碼_UGUI（二）- Canvas Scaler