首页 > 其他分享> > 「Unity3D」UGUI Text ＜quad/＞使用详解：一种实现图文混排的策略

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

2021-01-31 12:59:00 作者：互联网

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

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);
        }                  
    }
}
}

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

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

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