UGUI速成班—— 04. Canvas

Posted 2020-09-07

这一节将主要讲述所有UGUI物体的最顶级父物体——Canvas前几讲为大家介绍了Text、Image和Button，主要陈述的是UGUI的功能性，但说到底凡是UI都需要考虑其界面排布和呈现等因素。因此在此章节的Canvas和下一章节的Rect Transform快速为大家补上！

-----------------------

4.Canvas

Canvas 意思为画布，在Hierarchy栏目下右键==>UI，选择Canvas或者任何UGUI控件，我们仍以Image为例，那么在Hierarchy栏目下会多出携带了Image的Canvas控件和EventSystem控件，这里就不再次附图了。

Canvas的尺寸和形状，其实是由Unity里Game视窗决定的。再次我强烈建议所有初学者，不论开发什么Demo，都一定先设置好Game视窗的长宽比，方便对于已经排布好的东西一目了然。在Game视窗下点开，如果不知道用什么尺寸的话，建议先用16:9，因为大部分显示屏不论PC还是手机都采用1920*1080的分辨率，当然，如果手机竖屏使用的话当然得9:16。也可以在下方添加自己常用的长宽比，笔者有很长一段时间用的是自己添加的2560:1440。

 

好，我们终于正视Canvas控件下的组件了。

 

一、             Canvas组件，包含有RenderMode、Pixel Perfect、Sort Order和Target Display等条目

①  Render Mode是该画布上所有UGUI物体的渲染模式，可选的有

a)        Screen Space – Overlay：画布的默认渲染模式，将该画布上简单地叠加于UI层面，直接呈现在屏幕上。

Sort Order：仅在Overlay模式下可用，默认为0，是画布之间的渲染层级。在制作一些大型Demo中，时常会涉及多个Canvas画布，Sort Order值越大的，渲染优先级越高，呈现在越上层。

b)        Screen Space – Camera：选中该模式后，菜单中会多出一个Render Camera和Plane Distance。需要在Render Camera处为画布绑定一个相机，此后该画布上的UGUI物体只能为该相机所见，其他相机不可见。画布永远垂直于相机的Z轴，所以不用担心旋转角度的问题，而画布的四个角将会刚好与相机视锥的四条棱相交，所以画布能刚好填满相机的画面。

 

2  这里要注意一下视锥的概念：从相机出发的四棱锥体，这是根据透视投影法决定的；视锥的四个侧面将会投影为相机成像屏幕的四条边；在四棱锥内、由远（Far）近（Near）裁剪面包裹的范围是该相机的可见范围。

2  Plane Distance是画布到相机的距离，切记这个距离必须介于相机的Far值和Near值之间，否则画布将不可见。

2  现在可以将物体“塞”进画布和相机中间的空间，笔者将一个Cube这么做了，因此呈现了下图左边的画面，Cube挡住了画布；此时若将Canvas的模式改为Screen Space-Camera，则会变成右边的样子，画布重新被置于最顶层。可两者在Scene中的布置是一样的。

 

 

Sorting Layer：将画布上的UGUI物体归于某个层级，默认是Default层、

Order in Layer：倘若有多个画布都属于某个层级中，Order越大则渲染优先级越高。

a)        World Space：该画布及其所有子物体都将作为实际存在的三维物体，除了Layer属性是“UI”之外，不会有任何区别。可以在摄像机前移动、翻转和缩放。

 

②  Pixel Perfect被勾选后，该画布上的所有UI物体都会被严格像素化，看起来更尖锐，减小模糊度。但是这样不适合被旋转和缩放的UI，因为这样会加大渲染消耗。

 

二、             Canvas Scaler是画布系统的比例定标组件，上面最主要的部分就是UI Scale Mode，下拉可选项有Constant Pixel Size、Scale With Screen Size和ConstantPhysical Size三项。

 

①  Constant Pixel Size，该模式下，所有UGUI的尺寸全都以严格的像素来计量。在此模式下，需要非常严格地设计每个UGUI物体的Anchor，也就是锚点，来保证屏幕比例变化时、UGUI物体不会排布错乱。

②  Scale With Screen Size

a)        该模式需要首先确定Demo的参考分辨率，Reference Resolution。下图的ReferenceResolution是X=800，Y=600，即Demo默认是在800*600的屏幕上运行，并且如果屏幕分辨率不是800*600，UI图标会进行自适应调整。

b)          Screen Match Mode：该选项控制画布是否“溢出”屏幕。下拉可选项有Match Width or Heigh、Expand和Shrink ：

               i.             Match Width or Height-按照宽度或者高度进行自适应调整。

                                         Match条-这是决定宽度和高度在自适应调整中所参考的比重。

              ii.             Expand-当画布呈现的屏幕小于参考分辨率时，将之拉伸，超出则不管。

            iii.             Expand-当画布呈现的屏幕大于参考分辨率时，将之裁剪，小于则不管。

③ConstantPhysical Size，该模式将以渲染步骤最后的物理尺寸来描述UI尺寸。

 

Physical Unit-可以设置物理单位，有厘米、毫米、英尺、点和活字5个可选项。 

Fallback Screen DPI-屏幕DPI未知时采用的DPI（屏幕每英寸的像素点数目） 

Default Sprite DPI -精灵图片每英寸的默认像素值 

三、Graphic Raycaster

者对于这个项目实在所知不多，只知道这是相应各类触控事件的射线传感器，

并在此附上一段摘自于博客http://doc.okbase.net/185335/archive/120256.html的原文：

“每个Canvas都有一个Graphic Raycaster，用于获取用户选中的uGUI控件。多个Canvas之间通过设置Graphic Raycaster的priority来设置事件响应的先后次序。当Canvas采用World Space或Camera Space时，Graphic Raycaster的Block选项可以用来设置遮挡目标。”

今天的章节木有代码，全都是手动设置，诸位加油！