【Unity学习笔记】Canvas Scaler组件

声明：此篇文章是个人学习笔记，并非教程，所以内容可能不够严谨。可作参考，但不保证绝对正确。如果你发现我的文章有什么错误，非常欢迎指正，谢谢哦

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元素从而适配不同分辨率的屏幕。

第一种模式 Constant Pixel Size

这个模式也是在Canvas在没有附加任何Canvas scaler情况下的默认功能。但是，借助Canvas Scaler中的“Scale Factor”属性，可以自由设定UI元素缩放的比例。

在Constant Pixel Size模式下，用代码实现UI自适应

通常屏幕尺寸变化要同时考虑宽、高两边的变化。但是我们只能设置一个缩放比例Scale Factor。因此要实现能用的UI自适应就要在这个系数上面做文章。

为了便于理解，先只考虑一侧的变化，这里拿宽度举例。

1.首先所有的UI元素的锚点要为“点模式”（可以将锚点放在四个角之一，这样UI元素距离四个角的距离不变），这样所有UI元素才能统一实现原比例显示。

2.在代码中将“运行时的屏幕宽度”除以“编辑时的屏幕宽度”，将Scale Factor的值设为该值，从而让所有UI元素缩放相应倍数。为了方便观察我把自适应代码放在了Update函数，实际上只需要放在Start函数中，运行一次即可。

void Start() { 
    canvasScaler = GetComponent<CanvasScaler>(); } // Update is called once per frame void 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; //编辑时屏幕分辨率为650x400 canvasScaler.scaleFactor = propotion * h + (1 - propotion) * w; } 

方案二 ：按缩放比例较小的那一侧缩放：

方案逻辑：

1.如果高、宽两侧中有一侧缩小一侧放大，那么就取缩小那一侧的值

2.如果高、宽两侧都缩小，那么就取缩小程度较大的那一侧的值

3.如果高、宽两侧都放大，那么就取放大程度较小的那一侧的值

总之就取 实际屏幕高/编辑时屏幕高 实际屏幕宽/编辑时屏幕宽 较小的那个值

代码：为了更好观察才放在了Update函数中，实际上只需要放在Start函数中，运行一次即可。

 void Update() { 
    //获取运行时的屏幕分辨率 screenWidth = UnityEngine.Screen.width; screenHeight = UnityEngine.Screen.height; //总之，应当随下面两个浮点数的较小那个变化 float w = screenWidth / 650; float h = screenHeight / 400; //编辑时屏幕分辨率为650x400 if (w < h) canvasScaler.scaleFactor = w; else canvasScaler.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; //编辑时屏幕分辨率为650x400 if (w > h) //只需要把这里的 
   <改成> canvasScaler.scaleFactor = w; else canvasScaler.scaleFactor = h; } 

三种方案的总结:

方案一：可以通过调整权重，来影响在不同分辨率屏幕的效果。最终可以通过不断调整数值选择一种在所有已知的分辨率里面平均效果不错的权重。

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

方案三：在宽、高变化程度差不多得情况下得效果和方案二差不多，但是有一点点视觉上得区别。不适合宽高比例变化程度差异很大得情况。

这三种方案并不需要手写代码，可以直接设置，怎么设置看下面。

第二种模式 Scale With Screen Size

第三种模式：Constant Physical Size