UGUI Canvas画布

Canvas画布

定义

Canvas（画布）是Unity UGUI系统中的一个重要组件，用于在屏幕上绘制UI元素。它是UI元素的容器，可以包含各种UI元素，如按钮、文本、图像等。Canvas组件提供了一种方便的方式来管理和渲染UI元素。

所有的UI组件都在画布的子集中，画布相当于所有UI的容器，每当创建一个UI物体时，Canvas都会自动创建。

和Canvas一同创建的还有EventSystem，它是一个一个基于Input的事件系统，可以对键盘按键、屏幕触摸、鼠标输入事件进行处理。

Canvas组件的工作原理

Canvas组件通过渲染器将UI元素绘制到屏幕上，它使用层级结构来管理UI元素的显示顺序，可以通过设置UI元素的层级来控制它们的显示顺序。  

Canvas组件还可以设置渲染模式，包括屏幕空间、世界空间和摄像机空间等。

Canvas的各种参数

Render Mode：渲染模式

Screen Space overlay：让UI始终位于界面最前面

Screen Space camera：赋值一个相机，按照相机的距离前后显示UI和物体

World Space：让画布变成一个3D物体 可以进行移动旋转等等

Canvas Scaler：控制画布的缩放比例

Constant Pixel Size：固定像素大小，无论屏幕尺寸如何变化，UI都不会变化

Scale With Screen Size：根据屏幕分辨率，自动调节UI比例

Constant Physical Size：固定物理像素大小

Graphic Raycaster：控制是否让UI响应射线点击

Ignore Reversed Graphic：忽略反转的UI，UI反转后点击无效

Blocking Objects：阻挡点击物体，当UI前有物体时，点击前面的物体射线会被阻挡

Blocking Mask：阻挡层级，当UI前有设置的层级时，点击前面的物体射线会被阻挡

Sorting Layer（排序层级）

设置Canvas的排序层级，用于控制UI元素的显示顺序。

Order in Layer（层级顺序）

设置UI元素在排序层级中的显示顺序。

Pixel Perfect（像素完美）

启用像素完美模式，可以确保UI元素在不同分辨率下的显示效果一致。

Reference Pixels Per Unit（参考像素单位）

设置参考像素单位，用于计算UI元素的大小和位置。

Canvas关键参数

1、Render Mode：控制UI的渲染模式

Screen Space overlay：让UI始终位于界面最前面

Pixel Pefect：完美像素，边缘更加清晰。

Sort Order：渲染顺序，多个Canvas时可以调整其显示顺序

Target Display：目标显示器，Unity多开时选择显示器用

Canvas将置于屏幕最上层，自动填充屏幕，不会被其他模式的Canvas或2D/3D物体遮挡。Canvas的大小和位置无法通过手动设置, 大小只能和屏幕大小一致, 位置总是处于屏幕正中间。

Screen Space camera：赋值一个相机 按照相机的距离前后显示UI和物体

Pixel Pefect：完美像素，边缘更加清晰。

Render Camera：对应的渲染相机，也就是该Canvas显示在哪个Camera前面，不同的Camera渲染顺序可能不同。

Plane Distance：Canvas与Camera的距离。

Sorting Layer：渲染层级，影响渲染顺序。

Order in Layer：同一渲染层级下的渲染顺序。

Canvas将置于相机前方，此时在Canvas和相机中间的2D/3D物体将显示在UI上面。利用这一点，可以通过调整Z坐标或者SortingLayer，来调整渲染和视觉顺序，从而在UI界面展示3D模型、粒子特效等。

也可以混合多个摄像机的结果, 根据摄像机的Depth属性来决定渲染顺序, 值小的先渲染。

上面的摄像机负责照射UI，下面的摄像机负责照射3D物体, 注意ClearFlags需要设置为DepthOnly或者Don’t Clear，否则后渲染的摄像机渲染内容会被覆盖。

World Space：让画布变成一个3D物体 可以进行移动旋转等等

Event Camera：接收UI事件的Camera，Click、Drag等事件。

Sorting Layer：渲染层级，影响渲染顺序。

Order in Layer：同一渲染层级下的渲染顺序。

Canvas将作为一个游戏对象显示在3D场景内，可以通过修改Rect Transform的相关属性来调整显示。

2、Canvas Scaler：控制UI画布的缩放比例

Canvas Scaler是屏幕适配的主要方式，一般通过该组件就可以完成适配，如果有需求，还可以通过Screen.height和Screen.width获取屏幕长宽，然后代码控制UI位置及缩放。

Canvas Scaler只用于Canvas的Screen Space两种模式，World Space模式Canvas作为一个3D物体，不涉及适配问题。

Constant Pixel Size：固定像素大小 无论屏幕尺寸如何变化，UI都不会变化。

Scale With Screen Size：根据屏幕分辨率，自动调节UI比例

Reference Resolution

参考分辨率，进行屏幕适配，自动缩放UI大小时，将以此作为参考。

Screen Match Mode

首先，需要设置Panel大小与Reference Resolution一致，锚点设在中心。

屏幕匹配方式，分为三种：

Match Width Or Heigh：保持宽高比不变，通过设置Match值，对宽高进行缩放。如果Match值为0，优先缩放宽度与屏幕宽度一致，高度或超出屏幕或在屏幕内；如果Match值为1，则优先缩放高度。

Expand：保持宽高比不变，优先缩放任一宽度或高度与屏幕一致，另外一个方向在屏幕内，即Canvas包含在屏幕内。

Shrink：保持宽高比不变，优先缩放任一宽度或高度与屏幕一致，另外一个方向在屏幕外，即屏幕包含在Canvas内。

Reference Pixel Per Unit：Unity的1个单位代表多少个像素。

Constant Physical Size：固定物理像素大小

固定物理尺寸，这个模式很少用到。

Physical Unit：物理单位，点、毫米、厘米等。

Fallback Screen DPI：物理单位的像素密度。

Default Sprite DPI：默认Sprite的像素密度。

Reference Pixel Per Unit：Unity的1个单位代表多少个像素。

3、Graphic Raycaster：控制是否让UI响应射线点击

    

 Ignore Reversed Graphic：忽略反转的UI，UI反转后点击无效

    Blocking Objects：阻挡点击物体 当UI前有物体时 点击前面的物体射线会被阻挡

    Blocking Mask：阻挡层级 当UI前有设置的层级时 点击前面的物体射线会被阻挡