UGUI基础 之Canvas画布

UGUI的目录结构

UGUI包括很多UI工具，但所有的UI工具都会在Canvas（画布）下进行渲染显示。所以当新建一个工具时系统会默认新建一个Canvas（画布）和一个EventSystem（事件系统），新建的UI工具会默认成为Canvas的子物体。当场景中已经存在一个Canvas时，新建的所有UI工具都会默认作为Canvas的子物体。如图3-1所示：图3-1

2.2 Canvas画布

2.2.1创建Canvas画布

在Hierarchy面板下进行操作Create-->UI。在右侧会出现UGUI下的工具（如图3-2）。点击相应工具该工具就会出现在Hierarchy面板以及场景视图中。例如创建一个Canvas，在Hierarchy面板下操作Create--> UI --> Canvas，这样在Hierarchy就会看到Canvas创建成功（如图3-3）。

图3-2

图3-3

注：UGUI中创建任一个UI中的任何UI工具，在Hierarchy面板中系统都会默认添加Canvas并作为该UI工具的父物体。如果已经有了Canvas则不在添加。如果新建多个UI工具，这些UI工具会自上而下排列在Canvas下，越是排在下面的在Sence视图中越显示在最上层。

创建完成后，在Hierarchy面板中系统默认会添加一个EventSystem。EventSystem作用是处理UI的事件，一般会结合代码使用。

2.2.2 Canvas渲染模式

在Canvas里有一个Render Mode属性。Render Mode用于控制Canvas及其子UI工具的渲染模式。Render Mode有三种渲染模式：Screen space – Overlay、Screen Space – Camera和World Space（如图3-4 Canvas画布渲染模式）。

Screenspace - Overlay

在场景中UI被渲染在屏幕上，因为根本没有经过投影空间，而是直接在屏幕空间绘制，所以在场景中没有相机也会呈现UI。如果屏幕大小改变或更改了分辨率，画布将自动更改大小来适配屏幕。

ScreenSpace - Camera

类似于Screen

Space - Overlay。但在这种渲染模式下，画布被放置在指定相机前的一个给定的距离上，通过指定的相机UI被呈现出来，Camera setting会影响到UI的现实。如果屏幕大小改变或更改了分辨率，画布将自动更改大小，以很好的适配屏幕。

World Space

在这种模式下呈现UI，UI是3D场景中的一个平面。与上面两种不同，此时UI不需要面对镜头，可以面向任意方向。可以使用Rect Transform设置画布的大小，但其屏幕的大小将取决于相机拍摄的角度和相机的距离。

图3-4 Canvas画布渲染模式

2.2.3 Canvas Scaler

该属性的作用就是对Canvas的缩放。

UIScale Mode包括ConstantPixelSize、ScaleWithScreenSize、ConstantPhysicalSize。如下图：

ConstantPixelSize：

该模式下是由像素尺寸来决定UI缩放的。Scale

Factor默认为1，ConstantPixelSize的作用是设置scale的XYZ轴为1。所以，Canvas的width和height总是等于屏幕大小。当设备分辨率变小时，scale的XYZ轴仍然为1，UI元素的大小并不改变，但Canvas的width和height变小了，所以UI元素在Canvas中的比例会等比例变化。

ScaleWithScreenSize：

该模式屏幕的尺寸来决定UI缩放。换言之UI会根据屏幕分辨率和当前设备分辨率，自动匹配合适的scaleFactor。如果设备分辨率和参考分辨率比例不同，Canvas会自动设置width/height来解决。

ConstantPhysicalSize：

根据屏幕的PPI（像素密度）信息和ConstantPhysicalSize本身的配置信息得出一个最佳的scaleFactor，以达到UI在不同PPI设备上的最终大小都是一致的。