UGUI笔记1-Canvas

Unity4.6版本开始才有了新的UI系统UGUI

一.Canvas的组件介绍

1.Canvas

Canvas是UGUI最根本的元素，它是一个区域（画布）用来容纳所有UI元素的，UI元素必须是它的子物体，才能显示出来！

Canvas的三种渲染模式（Render Mode）

• Screen Space - Overlay ： UI元素在所有3D物体之上
  　这种模式下摄像机可有可无，UI元素仍然能够显示；如果有摄像机，UI元素绝对是显示于所有3D物体之上的，不会被遮挡！
  　Pixel：是否像素对齐以及排序
  　Sort Order：数字越大的Canvas显示在前

image.png

• Screen Space - Camera：UI元素位置和摄像机有关，离摄像机前面有一定距离，
  　这种模式下没有摄像机的话，和第一种效果一样（如下图，它会提示你要指定一个摄像机）；指定摄像机后，3D物体就可以显示在UI元素的前面，需要先调Plane Distance（Canvas与摄像机的距离），然后在调3D物体的位置，让它处于摄像机与Canvas之间，就可以显示于UI元素之上
  Plane Distance：单位是米
  Sorting Layer：位于下面的选项显示在前，显示位置优先由这个选项决定，如果选项一样，再由Z轴决定，同Layer还可调Order in Layer来调显示顺序

image.png

image.png

• World Space ： 纯三维UI，Canvas可以随意旋转移动，和3D物体一样

image.png

2.Canvas Scale

主要用来控制UI界面中，Canvas的缩放，当屏幕分辨率和我们设计分辨率不一样的时候，如何缩放我们的Canvas
Scale Factor：缩放的倍数，如果原先图片的像素是800×600，把这个参数调成2图片大小就会变成1600×1200，一般默认为1，即图片初始大小，不更改。
Reference Pixels Per：1米代表多少个像素，一般默认为100，1米=100像素，不更改

Canvas的三种缩放模式（UI Scale Mode）

• Constant Pixel Size（比较少用）：像素大小是常量，也就是说，无论屏幕大小怎么变化，UI元素都不会变化
  

  

  image.png

• Scale With Screen Size（最常用）：按照参照分辨率进行等比缩放
  首先要设置好参照的分辨率 Reference Resolution，这个美工会定好这套UI是按照哪种分辨率来进行设计的，比如说800*600，填上去就完事了
  Screen Match Mode：屏幕匹配模式，当屏幕大小与参照分辨率不一致时，调整此参数可以调整UI元素在当前屏幕的缩放比例，防止UI元素显示不全，有以下三个选项
  　Match Width Or Height：有拖动条，最大0，最小1，内容的宽除以设计的宽，内容的高除以设计的高
  　Expand：等于第一个选项的0值，UI元素等比例缩小，屏幕可能会留空，也就是缩小到尺寸和参照分辨率一致，让内容不超出屏幕
  　Shrink：等于第一个选项的1值，UI元素等比例放大直至填充屏幕留空位置，也就是放大到尺寸和屏幕一致，让屏幕不留空

image.png

image.png

image.png

2.RectTransform

RectTransform继承自Transform，是所有UI元素都有的组件，由于是平面的，Scale的z轴是没有用，而Rotation的y有用，一般用来做3D效果的UI
　Pivot：中心点，可以设置UI元素中心点的位置，中心点是一个蓝色圆环形状
　Anchors：锚点，它是以自身UI元素的父容器为基准的，锚点不能移出父容器区域外，由4个三角形组合成

image.png

UGUI的坐标系：

image.png

锚点的两种情况：

• 让我们来看第一种情况，锚点是合在一起的，即４个三角形顶点相对，UI元素可以根据锚点移动
  PS：这个锚点和中心点是白色图片的，图片的父物体是一个Panel
  
  

  image.png

这种情况下，设置图片的位置，它会以自身锚点的位置为原点，以中心点为基准来进行偏移，比如把图片位置设置为0，那么图片中心点会与锚点重合

image.png

也就是说，锚点在哪里，中心点根据锚点位置通过设置Pos X Pos Y来移动

• 接下来是第二种情况，锚点是分开的，可以是４个三角形分开，可以是两两组合
  这种是两两组合：上下是粘连在一起的，左右分离，此时宽度由锚点决定，通过设置Left和Right，而高度依然是由Height来设置
  
  

  image.png
  
  把Left、Right、Pos Y 依次归零会发现，图片的左边会和左边的锚点对齐,也就是图片的左边与锚点的间距为0个像素，右边会和右边的锚点对齐，也就是图片的右边与锚点的间距为0个像素，y归0后，中心点所在的水平线会和锚点所在的水平线对齐.
  
  

  image.png
  
  那么另一种两两组合的情况也是一样的：左右粘连，上下分离，此时高度由锚点决定，通过设置Top和Bottom，意思就是上边距离上锚点的距离，下边距离下锚点的距离，而宽度依然是由Width来设置.
  如果是4个三角形都分开的情况呢？相信各位都知道怎么回事了吧，那么就是变成Left、Right、Top、Bottom，而这是4个值和上面的没有区别，都是一样的意思；此时图片的位置x，y轴都由锚点的位置来决定，图片的宽，高则由4个锚点的之间的距离来决定，那么中心点就没有那么重要了，这4个值的单位是像素