UGUI学习笔记（一）Canvas

深藏阁楼爱情的钟 2023-09-28 22:49 17阅读 0赞

## 一、Canvas ##

画布（Canvas）是容纳所有UI元素的区域。当我们创建UI元素时如果场景中没有Canvas，Unity会自动创建一个，并将UI元素作为Canvas的子项。

## 二、Canvas组件 ##

Canvas上一个最重要的组件就是Canvas组件，所有UI元素都必须是添加了Canvas组件的游戏物体的子对象。它主要设置了UI的渲染模式，包括：Screen Space - Overlay、Screen Space - Camera 和 World Space。  
![2799f00ba36172f55b7965884eb20265.png][]

首先看「Screen Space - Overlay」模式  
在此模式下，Canvas会进行缩放来适应屏幕。

*  即便场景中没有相机，也会渲染UI。
 *  如果更改屏幕的大小或分辨率，则UI将自动重新缩放来进行适应。
 *  需要注意，官方文档中强调Screen Space - Overlay模式下的Canvas必须处于Hierarchy中的最顶层，否则可能出现UI消失的问题  
    ![0b8bbf9ab12c8cdbfe3d44bc5c6a3c80.png][]

再来看「Screen Space - Camera」模式  
在此模式下，画布的渲染效果就像在摄像机前一定距离的平面上进行绘制。

*  UI始终准确适应摄像机的视锥体，因而UI在屏幕上的大小不会随摄像机的距离而改变。
 *  如果更改屏幕的大小或分辨率，则UI将自动重新缩放来进行适应。
 *  在场景中比UI平面更靠近摄像机的3D物体会在UI前面渲染。  
    ![970aa5a8a0f3f17675c1277adc920223.png][]

接下来是「World Space」模式  
在这个模式下，画布等同于场景中的3D物体。可以自定义其大小、旋转等属性。  
![732b4c3900c03c79da0b756cddfac9b9.png][]

## 三、Canvas Scaler组件 ##

这个组件主要用来控制画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容，包括字体大小和图像边框。  
![6408c88a71a423a930c882885a07d179.png][]

首先是「UI Scale Mode」属性，它用来确定画布中的UI元素缩放方式，包含如下选项：

*  **Constant Pixel Size**：无论屏幕大小如何，UI 元素都保持相同的像素大小。
 *  **Scale With Screen Size**：屏幕越大，UI 元素越大。
 *  **Constant Physical Size**：无论屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。
 *  ![0050efe819d2c76ea264748f67635b9c.gif][]

### Constant Pixel Size ###

当「UI Scale Mode」处于「Constant Pixel Size」选项时，可在屏幕上按像素指定 UI 元素的位置和大小。这也是画布在未附加任何「Canvas Scaler」时的默认功能。但是，借助「Canvas Scaler」中的「Scale Factor」设置，可以向画布中的所有 UI 元素应用常量缩放。  
在该模式下有如下设置项：

*  **Scale Factor**：按此系数缩放画布中的所有 UI 元素。
 *  **Reference Pixels Per Unit**：如果精灵具有此「Pixels Per Unit」设置，则精灵中的每个像素将覆盖 UI 中的一个单位。

当我们的UI在「1920×1080」分辨率下显示正常，切换到「2560×1440」分辨率下就可能出现显示过小的问题。这种情况下，「Scale Factor」就派上了用场。通过动态设置该属性，可以实现UI大小随分辨率的自适应

void Start()  
    {
          
        var scaler = Screen.width / 1920f;  
        GetComponent<CanvasScaler>().scaleFactor = scaler;  
    }

![ba1443e7002b2e584858e943b1ab23a8.gif][]

在图片导入设置中有「Pixels Per Unit」这个参数，它设置了这张图片在Unity中每个Unity单位显示多少个像素。比如我有一个「600×600」的图片，当我将「Pixels Per Unit」设置为1，则代表图片的一个像素对应Unity中的一个单位。此时将Canvas的「Reference Pixels Per Unit」属性也设置为1，则将图片设置为原始大小时，它的宽高就是「600×600」  
![563b820601d353ad8aed76b5e0afeb17.png][]

将图片的「Pixels Per Unit」设置为10，则代表图片的十个像素对应Unity中的一个单位。此时将图片设置为原始大小，它的宽高就是「60×60」  
![e500bbef64f51cabce70ed8bf5cf938d.png][]

将Canvas的「Reference Pixels Per Unit」也设置为10，则代表图片每个像素覆盖UI中的十个单位。此时将图片设置为原始大小，其宽高就会变回「600×600」  
![42fa768c980e16fb7131bb7bd23303d5.png][]

### Scale With Screen Size ###

当「UI Scale Mode」处于「Scale With Screen Size」选项时，可以根据指定参考分辨率的像素来指定位置和大小。如果当前屏幕分辨率大于参考分辨率，则画布会保持只具有参考分辨率的分辨率，但是会放大以便适应屏幕。如果当前屏幕分辨率小于参考分辨率，则画布会相应缩小以适应屏幕。  
如果当前屏幕分辨率的宽高比与参考分辨率不同，则单独缩放每个轴以适应屏幕会形成非一致缩放，通常不希望发生这种情况。通过「Reference Resolution」 属性会使画布分辨率偏离参考分辨率，以便遵循屏幕的宽高比。可以使用「Screen Match Mode」设置控制此偏离的行为方式。  
在该模式下有如下设置项：

*  **Reference Resolution**：UI 布局设计的目标分辨率。如果屏幕分辨率较大，则 UI 会放大，如果较小，则 UI 会缩小。
 *  **Screen Match Mode**：在当前分辨率的宽高比不适应参考分辨率时，用于缩放画布区域的模式。有「Match Width or Height」参考宽高权重进行缩放、「Expand」水平或垂直扩展画布、「Shrink」水平或垂直裁剪画布
 *  **Match**：宽高对于缩放的权重  
    ![b8b10e7557ffde2b74db40e7a74e82c3.png][]

当设定好目标分辨率之后，当实际分辨率与目标分辨率不符时，就会根据「Screen Match Mode」自动调整UI元素的宽高。当设定的权重偏向于Width时，UI元素的调整就会倾向于不改变Width只改变Height；当设定的权重偏向于Height时，UI元素的调整就会倾向于不改变Height只改变Width  
![07f91bd04f78b734f4e8f9c5b73882c1.gif][]

### Constant Physical Size ###

当「UI Scale Mode」处于「Constant Physical Size」选项时，可按物理单位（如毫米、点或派卡）指定 UI 元素的位置和大小。此模式要求设备正确报告其屏幕 DPI。对于不报告 DPI 的设备，可以指定回退 DPI。  
在该模式下有如下设置项：

*  **Physical Unit**：用于指定位置和大小的物理单位。
 *  **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」设置匹配。  
    ![3e0076feeb06d1a92fec752f7bea89d7.png][]

因为这个模式较少使用，所以这里不再详述。

## 四、Canvas Group组件 ##

这个组件主要用来统一控制UI元素中的一些共有的属性，比如透明度、是否禁用等。  
它有如下设置项：

*  **Alpha**：此组中的 UI 元素的不透明度。该值介于 0 和 1 之间，其中 0 表示完全透明，1 表示完全不透明。请注意，UI 元素也会保留自己的透明度，因此画布组的 Alpha 值将与各个元素的 Alpha 值彼此相乘。
 *  **Interactable**：确定此组件是否接受输入。当设置为 false 时，禁用交互。
 *  **Block Raycasts**：是否接收射线事件输入
 *  **Ignore Parent Groups**：是否受到更上层Canvas Group组件影响。  
    ![3a39a76db36ef89970700f8a00a7331d.gif][]

[2799f00ba36172f55b7965884eb20265.png]: https://img-blog.csdnimg.cn/img_convert/2799f00ba36172f55b7965884eb20265.png
[0b8bbf9ab12c8cdbfe3d44bc5c6a3c80.png]: https://img-blog.csdnimg.cn/img_convert/0b8bbf9ab12c8cdbfe3d44bc5c6a3c80.png
[970aa5a8a0f3f17675c1277adc920223.png]: https://img-blog.csdnimg.cn/img_convert/970aa5a8a0f3f17675c1277adc920223.png
[732b4c3900c03c79da0b756cddfac9b9.png]: https://img-blog.csdnimg.cn/img_convert/732b4c3900c03c79da0b756cddfac9b9.png
[6408c88a71a423a930c882885a07d179.png]: https://img-blog.csdnimg.cn/img_convert/6408c88a71a423a930c882885a07d179.png
[0050efe819d2c76ea264748f67635b9c.gif]: https://img-blog.csdnimg.cn/img_convert/0050efe819d2c76ea264748f67635b9c.gif
[ba1443e7002b2e584858e943b1ab23a8.gif]: https://img-blog.csdnimg.cn/img_convert/ba1443e7002b2e584858e943b1ab23a8.gif
[563b820601d353ad8aed76b5e0afeb17.png]: https://img-blog.csdnimg.cn/img_convert/563b820601d353ad8aed76b5e0afeb17.png
[e500bbef64f51cabce70ed8bf5cf938d.png]: https://img-blog.csdnimg.cn/img_convert/e500bbef64f51cabce70ed8bf5cf938d.png
[42fa768c980e16fb7131bb7bd23303d5.png]: https://img-blog.csdnimg.cn/img_convert/42fa768c980e16fb7131bb7bd23303d5.png
[b8b10e7557ffde2b74db40e7a74e82c3.png]: https://img-blog.csdnimg.cn/img_convert/b8b10e7557ffde2b74db40e7a74e82c3.png
[07f91bd04f78b734f4e8f9c5b73882c1.gif]: https://img-blog.csdnimg.cn/img_convert/07f91bd04f78b734f4e8f9c5b73882c1.gif
[3e0076feeb06d1a92fec752f7bea89d7.png]: https://img-blog.csdnimg.cn/img_convert/3e0076feeb06d1a92fec752f7bea89d7.png
[3a39a76db36ef89970700f8a00a7331d.gif]: https://img-blog.csdnimg.cn/img_convert/3a39a76db36ef89970700f8a00a7331d.gif