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. MySQL的BlackHole引擎在主从架构中的作用

    MySQL在5.x系列提供了Blackhole引擎–“黑洞”. 其作用正如其名字一样:任何写入到此引擎的数据均会被丢弃掉, 不做实际存储:Select语句的内容永远是空. 和Linux中的 /dev/ ...

  2. PHP的性能优化方法总结

    什么情况之下,会遇到PHP性能问题? 1:PHP语法使用不恰当. 2:使用PHP语言做了它不擅长的事情. 3:使用PHP语言连接的服务不给力. 4:PHP自身的短板(PHP自身做不了的事情). 5:我 ...

  3. Jenkins系列——使用checkstyle进行代码规范检查

    1.目标 通过jenkins使用checkstyle对代码进行规范检查并生成html报告. 构建采用shell. 2.环境 checkstyle5.7(如果是Linux版本选用tar.gz格式) ap ...

  4. HDU - 2181 dfs [kuangbin带你飞]专题二

    保存每个节点的下一个节点一直往下面走就行了,不能重复经过某个点,当经过的点达到20个而且当前节点的下一个节点是起点就打印答案. AC代码 #include<cstdio> #include ...

  5. 内置函数 -- filter 和 map

    参考地址:http://www.cnblogs.com/sesshoumaru/p/6000788.html 英文文档: filter(function, iterable) Construct an ...

  6. Android线上Bug热修复分析

    针对app线上修复技术,目前有好几种解决方案,开源界往往一个方案会有好几种实现.重复的实现会有造轮子之嫌,但分析解决方案在技术上的探索和衍变,这轮子还是值得去推动的 关于Hot Fix技术 Hot F ...

  7. 迁移学习︱艺术风格转化:Artistic style-transfer+ubuntu14.0+caffe(only CPU)

    说起来这门技术大多是秀的成分高于实际,但是呢,其也可以作为图像增强的工具,看到一些比赛拿他作训练集扩充,还是一个比较好的思路.如何在caffe上面实现简单的风格转化呢? 好像网上的博文都没有说清楚,而 ...

  8. Git Compare with base,比较大文件时,长时间等待,无法加载

    问题 当使用Git比较一个大文件(几十兆数量级)版本见差异时,会一直等待加载,且内存消耗很大,导致其他进程很难执行.任务管理器中,可以看到此时的TortoiseGitMerge吃掉3G左右的内存. 原 ...

  9. C#图解教程 第十九章 LINQ

    LINQ 什么是LINQLINQ提供程序 匿名类型 方法语法和查询语法查询变量查询表达式的结构 from子句join子句什么是联结查询主体中的from-let-where片段 from子句let子句w ...

  10. haproxy反向代理配置示例

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...