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