UGUI之Canvas

翻译UGUI的初衷其实是为了方便自己的学习，如果有任何侵权之处，我会立即删除全部内容。由于个人能力有限，所以翻译出来的内容也仅仅是权且能看懂，唯一值得安慰的是聊胜于无。各种错误再所难免，还望各位指正。

 

为了更容易搞清楚UGUI为何，我会在翻译的同时，对关键名词与NGUI进行对比。同时，会在文章或者段落的最初，对关键名词加以解释，而后文基本均以其英文名称为准。

 

Canvas

 

原文链接：http://docs.unity3d.com/Manual/UICanvas.html

 

Canvas英文直译为帆布，画布。这里可以将整个UI视为一个画布，所有UI元素在这个画布上进行排列组合，等同于NGUI中的UIRoot，即所有UI元素的根节点。

 

Canvas

画布

The Canvas is the area that all UI elements should be inside. TheCanvas is a Game Object with a Canvas component on it, and all UI elements mustbe children of such a Canvas.

Canvas是所有UI元素应该存在的区域。Canvas有Canvas组件在上边，所有的UI元素都必须是其子物体。

Creatinga new UI element, such as an Image using the menu GameObject > UI > Image, automatically creates a Canvas, if there isn’t already aCanvas in the scene. The UI element is created as a child to this Canvas.

创造一个新的UI元素，例如通过菜单GameObject> UI > Image（创造）一个Image，假设场景内没有Canvas，会自动创造一个Canvas。UI元素会作为一个子物体被添加到该Canvas上。

The Canvas area is shown as arectangle in the Scene View. This makes it easy to position UI elements withoutneeding to have the Game View visible at all times.

Canvas区域在场景视野内显示为长方形。这让摆放UI元素的位置非常方便，不需要一直让游戏视野激活。

Canvas uses the EventSystem object to help the Messaging System.

Canvas使用事件系统来进行消息传递。

Draw order of elements

元素绘制顺序

UI elements in the Canvas are drawnin 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 onewill appear on top of the earlier one.

Canvas中UI元素的绘制顺序与其在Hierarchy中的顺序相同。第一个子物体首先被绘制，其次为第二个子物体，以此类推。假设两个UI元素重叠了，较晚添加的会出现在较早添加的上边。

To change which element appear on topof other elements, simply reorder the elements in the Hierarchy by draggingthem. The order can also be controlled from scripting by using these methods on the Transform component:SetAsFirstSibling,SetAsLastSibling, and SetSiblingIndex

通过简单的拖曳Hierarchy中的UI元素，就可以改变最先绘制的元素。其顺序也可以通过Transform中的SetAsFirstSibling, SetAsLastSibling, 和 SetSiblingIndex进行控制。

Render Modes

渲染模式

The Canvas has a Render Mode settingwhich can be used to make it render in screen space or world space.

Canvas有屏幕空间和世界空间两种渲染模式。

Screen Space - Overlay

屏幕空间——覆盖图

This render mode places UI elementson the screen rendered on top of the scene. If the screen is resized or changesresolution, the Canvas will automatically change size to match this.

该渲染模式下UI元素处于场景最上层（类似于Scene切换为2D模式的时候）。假设屏幕重设或者改变了分辨率，Canvas会自动改变大小以适应这种变化。

Screen Space - Camera

屏幕空间——摄像机

This is similar to Screen Space -Overlay, but in this render mode, the Canvas is placed a given distance infront 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 theCamera is set to Perspective, the UI elements will be rendered withperspective, and the amount of perspective distortion can be controlled by theCamera Field of View. If the screen is resized or changes resolution, orthe camera frustrum changes, the Canvas will automatically change size to matchas well.

这与屏幕空间——覆盖图是类似的，但在这种渲染模式下，Canvas与某一特定的Camera有一定的距离。UI元素是通过该Camera进行渲染的，这就意味着Camera的设置影响到了UI的表现。假设Camera设置为Perspective（透视模式），UI元素会以透视模式渲染，透视变形的总量可以通过Camera的FOV进行控制。假设屏幕重设或者改变了分辨率，又或者改变了摄像机的锥头（FOV模式下，Camera在Scene里可视为一个圆锥体），Canvas会自动改变大小以适应这种变化。

World Space

世界空间

In this render mode, the Canvas willbehave as any other object in the scene. The size of the Canvas can be setmanually using its Rect Transform, and UI elements will render in front of orbehind other objects in the scene based on 3D placement. This is useful for UIsthat are meant to be a part of the world. This is also known as a “diegetic

interface".

在该渲染模式下，Canvas与其他场景内的物体一样。Canvas的大小可以通过改变Rect Transform手动设置，UI元素会根据3D放置位置来决定是在其他物体之前还是之后进行渲染。这对UI作为世界的一部分是非常有用的。这也被称之为“叙事界面（或者场景内界面）”。