UGUI的Canvas画布

发表于2016-12-19

Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas之间可以进行“嵌套”使用。需要注意的是，场景中的任何一个UI对象，都肯定是某个Canvas对象的“子级”。

1.UI元素绘制顺序

UI元素在画布中的绘制顺序是依据它们在Hierachy视图中排列顺序，

情况1：2个UI元素并列同级自然顺序排版

运行游戏时，发现Image1_Red对象先被绘制，然后是Image2_Green；

情况2:2个UI元素嵌套排版

运行游戏时，依然发现Image1_Red对象先被绘制，然后是Image2_Green；

因此，如果需要调整UI元素之间的绘制顺序，可以通过以下2种途径来改变。

方式1：在Hierarchy视图中，排版UI时，通过调整UI之间的“层级关系”来改变UI元素的绘制顺序。

方式2：通过脚本来动态调整UI元素的绘制顺序，常用API如下：

SetAsLastSibling()：让该目标级点UI及其子级点UI一同显示在最其“父”级点的所有“子”级点UI即该目标级点的所有“兄弟”级点UI的最上面。

测试代码如下：

///
/// 设置UI显示在最上面
///
private void SetUIShowOnToppest(Transform curTransform)
{
   Debug.Log("设置" + curTransform.gameObject.name + "显示在最上面");
   curTransform.SetAsLastSibling();
}

运行测试代码之前，UI显示如下截图

运行测试代码时，UI显示结果如下截图

SetAsFirstSibling()：让该目标级点UI及其子级点UI一同显示在最其“父”级点的所有“子”级点UI即该目标级点的所有“兄弟”级点UI的最下面。

测试代码如下：

///
/// 设置UI显示在最底面
///
private void SetUIShowOnBottomest(Transform curTransform)
{
  Debug.Log("设置" + curTransform.gameObject.name+"显示在最底面");
  curTransform.SetAsFirstSibling();
}

运行测试代码之前，UI显示如下截图

运行测试代码时，UI显示结果如下截图

SetSiblingIndex()与GetSiblingIndex()：一般用于兄弟级点UI之间的绘制顺序的调整；

测试代码如下：

///
/// 设置UI在特定位置显示
///
private void SetUIShowOnIndex(Transform transform1,Transform transform2)
{
    Debug.Log("UI绘制顺序对调");
    int index1 = transform1.GetSiblingIndex();
    int index2 = transform2.GetSiblingIndex();
 
    transform1.SetSiblingIndex(index2);
    transform2.SetSiblingIndex(index1);
}

运行测试代码之前，UI显示如下截图

运行测试代码时，UI显示结果如下截图

发现Image1_Red与Image3_Green位置对调啦。

2.渲染模式

Screen Space-Overlay:覆盖模式，让Canvas画布摆放在场景的最上面的屏幕上，如果屏幕的Size或者分辨率发生了改变，Canvas也会自动调整自己的Size与屏幕保持一致。

设置屏幕16:9时，

设置屏幕5:4时，

ScreenSpace-Camera：相机模式，与Overlay模式相似，只是该模式需要绑定一个特定Camera，Canvas会被该Camera在其前方特定距离位置渲染。另外，Camera本身的一些设置也会影响到此模式下Canvas的渲染。屏幕Size，分辨率以及Camera的参数设置的改变，Canvas也会自动调整去匹配。