unity3d - Untiy UI：文字在精灵上，在视口蒙版后面？

问题描述

我想要一堆看起来像这样的按钮：

它位于网格布局组中。为了获得精灵顶部的文本，我使用了画布。这是我的层次结构的样子：

1)Top Level UI (canvas)
  2)GridList (image)
    3)Viewport (image w/mask)
      4)Content (image w/grid layout group) 
        5)ButtonPrefab
          5.10)CanvasForText w/Sort Override
            5.11)Text1
            5.12)Text2
            5.13)Text3
          5.20)Sprite

但是，带有排序顺序覆盖的 dang 画布意味着文本绘制在视口蒙版之外！

任何提示将不胜感激！

标签： unity3duser-interface

如果您不限于这种层次结构，最简单的解决方案在于 UI 元素的顺序。

默认情况下，一个内的 UI 元素Canvas从上到下呈现，因此如果您想在顶部绘制某些内容，只需将其移动到层次结构中的其他元素下方。这似乎令人困惑，因为背景是层次结构中的第一个元素，但好吧..它就是这样;）

看UI.Canvas

绘制元素的顺序

画布中的 UI 元素的绘制顺序与它们在层次结构中出现的顺序相同。首先绘制第一个孩子，然后绘制第二个孩子，依此类推。如果两个 UI 元素重叠，则后面的元素将出现在前面的元素之上。

要更改出现在其他元素之上的元素，只需通过拖动来重新排列层次结构中的元素。也可以通过在 Transform 组件上使用以下方法从脚本中控制顺序：SetAsFirstSibling、SetAsLastSibling和SetSiblingIndex。

您的层次结构应该看起来像

Top Level UI (canvas)
|--GridList (image)
   |--Viewport (image w/mask)
      |--Content (image w/grid layout group) 
         |--ButtonPrefab
            |--Sprite
            |--Text1
            |--Text2
            |--Text3

unity3d - Untiy UI：文字在精灵上，在视口蒙版后面？

问题描述

解决方案

推荐阅读