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元素的区域。画布是一个带有画布组件的游戏物体,并且所有的UI元素都应该是这个画布的子物体。

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.
创建一个UI元素,比如一个图片,使用路径GameObject > UI > Image,如果当前场景没有画布的时候就会自动创建一个画布。UI元素作为这个画布的子物体被创建。

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.
画布区域在场景视图中显示为一个矩形。这使得不用一直开启游戏视图就可以简单的放置UI元素。

Canvas uses the EventSystem object to help the Messaging System.
Canvas使用事件系统物体来实现信息系统。

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.
改变哪个元素显示在其他元素的上方,简单的拖拽改变元素在层级视图中的顺序。这个顺序也可以通过使用这些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.
画布有一个Render Mode设置,这个设置可以用来使它渲染在屏幕空间或世界空间。

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元素放置屏幕上在场景的最上方。如果屏幕改变大小或者改变方案,这个画布将会自动改变尺寸匹配它。

UI in screen space overlay canvas
屏幕空间覆盖画布的UI

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 specifiedCamera. 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 or changes resolution, or the camera frustrum changes, the Canvas will automatically change size to match as well.
这和Screen Space - Overlay很像,但是在这个模式下,画布被放置在离特定的相机给定的距离。UI元素通过这个相机渲染,也就意味着相机设置影响UI的表现。如果相机被设置为Perspective,UI元素将被渲染为透视,并且透视失真的量可以由相机的Field of View控制。如果屏幕改变大小或者改变方案,或者相机frustrum改变,这个画布将会自动改变尺寸匹配它。

UI in screen space camera canvas
屏幕空间相机画布的UI

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”.
在这种渲染模式下,画布将会像场景中的其它物体一样。画布的大小可以用它的Rect Transform手动设置,并且UI元素渲染在其他物体的前面或者后面将基于3D放置位置决定。这对UI来说意味着是世界的一部分。这经常被用来做一个“叙述界面”。

UI in world space canvas
世界空间画布的UI

Canvas 画布组件(官网翻译)的更多相关文章

  1. 卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】

    问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没 ...

  2. Knockoutjs官网翻译系列(一)

    最近马上要开始一个新项目的研发,作为第一次mvvm应用的尝试,我决定使用knockoutjs框架.作为学习的开始就从官网的Document翻译开始吧,这样会增加印象并加入自己的思考,说是翻译也并不是纯 ...

  3. 【官网翻译】性能篇(四)为电池寿命做优化——使用Battery Historian分析电源使用情况

    前言 本文翻译自“为电池寿命做优化”系列文档中的其中一篇,用于介绍如何使用Battery Historian分析电源使用情况. 中国版官网原文地址为:https://developer.android ...

  4. 【工利其器】必会工具之(三)systrace篇(1)官网翻译

    前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...

  5. android測试工具MonkeyRunner--google官网翻译

    近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供 ...

  6. 小程序开发-Canvas画布组件

    Canvas画布 基本使用方法: 在wxml中添加canvas组件 <canvas canvas-id='canvasDemo' class='demo'></canvas> ...

  7. Knockout 官网翻译

    Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...

  8. Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的

    初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中.它其实很简单.跟踪算法是这样的: 无论何时你定义了一个computed observable,K ...

  9. Knockoutjs官网翻译系列(三) 使用Computed Observables

    书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...

随机推荐

  1. 《android开发艺术探索》读书笔记(十)--Android的消息机制

    接上篇<android开发艺术探索>读书笔记(九)--四大组件 No1: 消息队列MessageQueue的内部存储结构并不是真正的队列,而是采用单链表的数据结构来存储消息列表,因为单链表 ...

  2. UVA-10954 贪心+优先队列

    贪心策略:每次选取最小的两个数相加,将和作为新的数加入序列,再从里面取两个最小的数...直到只剩下一个数.优先队列正好对付这题. PS :以前在学校OJ做过几乎一毛一样的这题 AC代码: #inclu ...

  3. eclipse Maven配置

    ①下载:http://maven.apache.org/download.cgi ②解压至:F:\Study\apache-maven-3.5.2 ③配置环境变量 变量名:M2_HOME 变量值:F: ...

  4. Ubuntu16.04+cuda9.0+matlab+opencv3.3+caffe服务器配置(问题汇总)

    Ubuntu16.04+cuda9.0+matlab+opencv3.3+caffe服务器配置(附遇到的错误和解决方法) 1.具体安装前需要的依赖包: ubuntu dependency: sudo ...

  5. 用开源的 ffmpeg 实现屏幕录像机

    在我看来,FFmpeg 绝对是一个很酷的应用.那么,它究竟有什么用呢?简单地讲,FFmpeg 相当于一个屏幕录像机.你可以使用它将屏幕上的操作过程录制下来,然后再将其播放给别人看.我们可以利用它制作教 ...

  6. GM8180_gpio内核模块调试

    #include <stdio.h>#include <sys/types.h>#include <sys/stat.h>#include <fcntl.h& ...

  7. Scheme change not implemented

    1.错误描述 2.错误原因 由于在改变Java代码中的方法或运行代码出现,导致Tomcat编译的代码不能替换工作空间的代码,即不能及时同步,出现错误 3.解决办法 (1)关闭Tomcat,clean一 ...

  8. Hibernate中的条件查询完成类

    Hibernate中的条件查询有以下三个类完成: 1.Criteria:代表一次查询 2.Criterion:代表一个查询条件 3.Restrictions:产生查询条件的工具类

  9. Ubuntu14.04下安装Flash Player

    Ubuntu14.04下安装Flash Player youhaidong@youhaidong:~$ sudo apt-get install flashplugin-nonfree [sudo] ...

  10. Flex和Java通信报错

    1.错误描述 11-30 18:15:52 ERROR [localhost-startStop-1] org.springframework.web.servlet.FrameworkServlet ...