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

本文主要是介绍「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 toFillfor (var i = spriteLastIndex; i > -1; --i){// remove <quad/> display from lastvar index = vertexLastIndex - (spriteLastIndex - i) * 4;toFill.PopulateUIVertex(ref leftBottom, index);     // LBtoFill.SetUIVertex     (    leftBottom, index - 1); // RBtoFill.SetUIVertex     (    leftBottom, index - 2); // RTtoFill.SetUIVertex     (    leftBottom, index - 3); // LT// get image from lastvar imageRT = this.transform.GetChild(i).GetComponent<Image>().rectTransform;var pos     = (Vector2) leftBottom.position + imageRT.sizeDelta / 2;// set sprite pos by <quad/> vertex posimageRT.SetLocalPositionXY(pos);}                  }
}

第三个问题， 由前文可知，我们可以使用<quad/>属性来控制占位符的大小，即：像素 height = size，像素width = size * （width / height）。

那么，令height = 1，则：size = 像素height，width = 像素width / size。

例如：一个图片的大小是——width = 300px，height = 500px——对应的就是：<quad size=500, width=0.6 />

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

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

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

这篇关于「Unity3D」UGUI Text ＜quad/＞ 使用详解：一种实现图文混排的策略的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---