「Unity3D」UGUI Text ＜quad/＞ 使用详解：一种实现图文混排的策略

首先，我们看一下官方说明。

This is only useful for text meshes and renders an image inline with
the text.

关键词在于：text meshes 和 image inline ——这说明，<quad/>设计是用在TextMesh而不是Text，并且它是一个文本内嵌图片，即可以自动图文混排。

其次，看一下官方例子。

<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5>

This selects the material at position in the renderer’s material array
and sets the height of the image to 20 pixels.

• material——是TextMesh对应MeshRender中Materials数组的索引。
• size——是图片的像素高度。
  

  

The rectangular area of image starts at given by the x, y, width and height values, which are all given as a fraction of the unscaled width and height of the texture.

• x，y——是图片在texture上的百分比偏移，如果texture是一个纹理集合，上面有很多表情，就可以用xy偏移到其中任意一个表情。
• width——是图片显示宽度的百分比缩放，即：显示宽度 = size * width。也就是说，width越大，图片显示宽度越大，反之越小。

<quad material=1 size=0300 width=2    height=1 />
<quad material=1 size=0300 width=1    height=1 />
<quad material=1 size=0300 width=0.5  height=1 />

• height——是图片显示高度的缩放百分比，即：图片显示高度 = 实际高度 / height。也就是说，height越大，图片显示高度越小，反之越大。

<quad material=1 size=0300 width=1  height=2/>
<quad material=1 size=0300 width=1  height=1/>
<quad material=1 size=0300 width=1  height=0.5/>

因此，我们可以看出：像素宽度 = size * （width / height）。也就是说，只要width和height保持1:1，像素宽度就不变，同时width越大显示宽度越大，height越大显示高度越小，反之width越小显示宽度越小，height越小显示高度越大。

<quad material=1 size=0300 width=2   height=2/>
<quad material=1 size=0300 width=1   height=1 />
<quad material=1 size=0300 width=0.5 height=0.5 />

接着，在Text中使用<quad/>的情况。

• 第一，显然就是无法与MeshRender配合，正确检索到material的索引。
• 第二，不仅无法正确使用material，还会显示前文所示的乱码。

但好的一面就是：<quad/>的属性可以正确设置图片大小，而<quad/>的大小会自动排版，那么我们就可以用<quad/>来做占位，进行图文混排的实现。

然后，使用<quad/>在Text中图文混排，需要解决的问题。

• 第一，消除乱码。
• 第二，用正确的图片替换占位符。

第一个问题，可以使用重写Text的protected override void OnPopulateMesh(VertexHelper toFill)方法来解决，即找到<quad/>占位的四个顶点，然后将四个顶点的坐标设置成同一个即可。

第二个问题，可以利用<quad/>顶点的position直接，将正确的图片替换到正确的未知。

如何确定<quad/>的顶点，在toFill中索引？

这里有一个技巧，就是如果<quad material=1，2，3，4，5，6，7 />即material!=0，那么所有<quad/>顶点的就会集中在toFill的尾部——这样我们就可以，把Text中的<quad/>的数组按照顺序，从toFill的尾部替换即可。

核心的实现代码如下：

protected override void OnPopulateMesh(VertexHelper toFill)
{
    base.OnPopulateMesh(toFill);

    var count = this.spriteInfoList.Count;

    if (count > 0)
    {
        var vertexLastIndex = toFill.currentVertCount - 1;
        var spriteLastIndex = count                   - 1;
        var leftBottom      = new UIVertex();

        // if <quad material!=0/> then the <quad/> data at the end of toFill
        for (var i = spriteLastIndex; i > -1; --i)
        {
            // remove <quad/> display from last
            var index = vertexLastIndex - (spriteLastIndex - i) * 4;

            toFill.PopulateUIVertex(ref leftBottom, index);     // LB
            toFill.SetUIVertex     (    leftBottom, index - 1); // RB
            toFill.SetUIVertex     (    leftBottom, index - 2); // RT
            toFill.SetUIVertex     (    leftBottom, index - 3); // LT

            // get image from last
            var imageRT = this.transform.GetChild(i).GetComponent<Image>().rectTransform;
            var pos     = (Vector2) leftBottom.position + imageRT.sizeDelta / 2;
            // set sprite pos by <quad/> vertex pos
            imageRT.SetLocalPositionXY(pos);
        }                  
    }
}
}

@L_404_4@最后，使用<quad/>实现Text图文混排的限制。

这些限制，其实是Text实现的bug。

• 第一，如果Text VerticalWrapMode是Truncate且text内容已经truncated，那么<quad/>将显示乱码，并且toFill vertexes将会出现大量重复冗余顶点。
• 第二，如果<quad/>的size超过500，那么<quad/>的height和position将会在cachedTextGeneratorForLayout.GetPreferredHeight的计算中出现错误的数值。