Canvas 画布组件(官网翻译)
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 画布组件(官网翻译)的更多相关文章
- 卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】
问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没 ...
- Knockoutjs官网翻译系列(一)
最近马上要开始一个新项目的研发,作为第一次mvvm应用的尝试,我决定使用knockoutjs框架.作为学习的开始就从官网的Document翻译开始吧,这样会增加印象并加入自己的思考,说是翻译也并不是纯 ...
- 【官网翻译】性能篇(四)为电池寿命做优化——使用Battery Historian分析电源使用情况
前言 本文翻译自“为电池寿命做优化”系列文档中的其中一篇,用于介绍如何使用Battery Historian分析电源使用情况. 中国版官网原文地址为:https://developer.android ...
- 【工利其器】必会工具之(三)systrace篇(1)官网翻译
前言 Android 开发者官网中对systrace(Android System Trace)有专门的介绍,本篇文章作为systrace系列的开头,笔者先不做任何介绍,仅仅翻译一下官网的介绍.在后续 ...
- android測试工具MonkeyRunner--google官网翻译
近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供 ...
- 小程序开发-Canvas画布组件
Canvas画布 基本使用方法: 在wxml中添加canvas组件 <canvas canvas-id='canvasDemo' class='demo'></canvas> ...
- Knockout 官网翻译
Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...
- Knockoutjs官网翻译系列(四) computed中依赖追踪是如何工作的
初学者无需了解这些 ,但是很多高级程序员想知道我们为什么可以保持跟踪这些依赖以及可以正确的更新到UI中.它其实很简单.跟踪算法是这样的: 无论何时你定义了一个computed observable,K ...
- Knockoutjs官网翻译系列(三) 使用Computed Observables
书接上回,前面谈到了在视图模型中可以定义普通的observable属性以及observableArray属性实现与UI元素的双向绑定,这一节我们继续探讨第三种可实现绑定的属性类型:computed o ...
随机推荐
- Java集合框架(一)—— Collection、Iterator和Foreach的用法
1.Java集合概述 在编程中,常常需要集中存放多个数据.当然我们可以使用数组来保存多个对象.但数组长度不可变化,一旦在初始化时指定了数组长度,则这个数组长度是不可变的,如果需要保存个数变化的数据,数 ...
- 阿里巴巴十年Java架构师分享,会了这个知识点的人都去BAT了
1.源码分析专题 详细介绍源码中所用到的经典设计思想,看看大牛是如何写代码的,提升技术审美.提高核心竞争力. 帮助大家寻找分析源码的切入点,在思想上来一次巨大的升华.知其然,并知其所以然.把知识变成自 ...
- 如何使用 OpenCV 打开摄像头获取图像数据?
OpenCV 如何打开摄像头获取图像数据? 代码运行环境:Qt 5.9.1 msvc2015 32bit OpenCV 3.3.0 #include "include/opencv2/ope ...
- 使用CrashHandler来获取应用的crash信息
源码地址https://github.com/king1039/android-art-res/tree/master/Chapter_13/CrashTest/src/com/ryg/crashte ...
- 如何架构一个合适的企业API网关
API Gateway(API GW / API 网关),顾名思义,是出现在系统边界上的一个面向API的.串行集中式的强管控服务,这里的边界是企业IT系统的边界,主要起到隔离外部访问与内部系统的作用. ...
- Spark源码编译(未完待续)
在这里我们不需要搭建独立的Spark集群,利用Yarn Client调用Hadoop集群的计算资源. Spark源码编译生成配置包: 解压源码,在根去根目录下执行以下命令(sbt编译我没尝试) ./m ...
- linux 云计算Openstack搭建
Openstack 由NASA和Reckspace合作研发并发起的项目,以Apache许可证为授权 云计算三大支柱模型 IaaS:基础架构即服务 提供服务器/虚拟主机/网络等设备资源 PaaS:平台即 ...
- Android视频播放的两种方式介绍
1.在Android 中播放视频的方式有两种: 第一种方式是使用MediaPlayer 结合SurfaceView 来播放,通过MediaPlayer来控制视频的播放.暂停.进度等: 通过Surfac ...
- Android常见漏洞
Android常见漏洞 漏洞名称: Log敏感信息泄露 漏洞描述: 程序运行期间打印了用户的敏感信息,造成泄露 修改建议: 建议禁止隐私信息的log 漏洞名称: web https校验错误忽略漏洞 漏 ...
- file_get_contents函数不能使用的解决方法
今天开发微信公众平台的时候 使用file_get_contents 去获得token 结果一直返回false.百度了一下,大部分都是说用curl 偶然发现可能是openssl没有开启的问题,开启ope ...