# 学会 UGUI 之 Canvas

Unity 官方文档
https://docs.unity3d.com/Manual/UICanvas.html

Canvas #

The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.
Canvas 是用来放置所有 UI 元素的地方。 Canvas 是一个含有 Canvas 组件的 GameObject,所有的 UI 元素必须是这样一个 Canvas 的子对象。

Creating a new UI element, such as an Image using the menu GameObject > UI > Image, automatically creates a Canvas, if there isn’t already a Canvas in the scene. The UI element is created as a child to this Canvas.
如果场景中还没有 Canvas 对象,新创建 UI 元素比如当你用菜单 GameObject->UI->Image 创建新的 Image 元素时就会自动添加 Canvas, Image 成为这个 Canvas 的子对象。

The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times.
Canvas 在场景窗口中显示为一个矩形。这会方便你进行 UI 元素的位置安放,而不用到游戏运行窗口中去调整。

Canvas uses the EventSystem object to help the Messaging System.
Canvas 使用 EventSystem 对象来辅助消息系统。

Draw order of elements 元素的绘制顺序 #

UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. The first child is drawn first, the second child next, and so on. If two UI elements overlap, the later one will appear on top of the earlier one.
UI 元素的绘制顺序和在层级窗口中显示的顺序是一致的。第一个子对象最先绘制,第二个子对象次之,等等。如果两个 UI 元素重叠,后面的会绘制到之前的那个上面。

To change which element appear on top of other elements, simply reorder the elements in the Hierarchy by dragging them. The order can also be controlled from scripting by using these methods on the Transform component: SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.
只要通过拖拽改变 UI 对象在层级窗口中的顺序就进可以让任何一个元素绘制到最上面。这个顺序也可以通过 Transform 组件中相关的脚本接口改变:SetAsFirstSibling, SetAsLastSibling 和 SetSiblingIndex。

Render Modes 渲染模式 #

The Canvas has a Render Mode setting which can be used to make it render in screen space or world space.
Canvas 拥有相关的渲染模式,可以设置在屏幕或世界空间中渲染。

Screen Space - Overlay 屏幕空间 - 覆盖

This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this.
这个模式将 UI 元素放到场景的最上面渲染。如果屏幕缩放或改变了分辨率,Canvas 会自动改变尺寸去匹配。

Screen Space - Camera 屏幕空间 - 摄像机

This is similar to Screen Space - Overlay, but in this render mode the Canvas is placed a given distance in front of a specified Camera. The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI. If the Camera is set to Perspective, the UI elements will be rendered with perspective, and the amount of perspective distortion can be controlled by the Camera Field of View. If the screen is resized, changes resolution, or the camera frustum changes, the Canvas will automatically change size to match as well.
这个和 Screen Space - Overlay 模式类似,但在这个渲染模式下,Canvas 是被放在一个指定摄像机前面一定的距离上。UI 元素是被这个摄像机渲染的,也就意味着摄像机相关的设置会影响 UI 的显示。如果摄像机设置为透视模式,UI 元素就会渲染为透视,而透视后的扭曲程度由摄像机的视域决定。如果屏幕改变了大小或者改变了分辨率,或者摄像机的视景体改变了,Canvas 都会自动改变尺寸去匹配。

World Space 世界空间

In this render mode, the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement. This is useful for UIs that are meant to be a part of the world. This is also known as a “diegetic interface”.
这种渲染模式会将 Canvas 当作场景中任何的其它对象一样对待。Canvas 的尺寸可以用 Rect Transform 进行手动调整,UI 元素的遮挡效果由 3D 位置决定。对于需要将 UI 作为场景中的一部分或者作为剧情化界面的情况非常有用。