[UGUI]图文混排(五)：添加下划线

0.下划线标签

标签格式：<material=underline c=#ffffff h=1 n=*** p=***>blablabla...</material>

material标签会在最后的渲染过程中被自动去除。

 

1.文字顶点分布

通过打印文字顶点，可以发现顶点是以text控件中的pivot为中心点排序的。如下图，以pivot为中心点建立坐标系，则从1到3，x轴逐渐递增；从1到7，y轴逐渐递减。

并且这些顶点坐标是局部坐标，相对于text中的pivot，无论怎样移动text，打印的坐标都是不变的。

 

2.下划线的计算

下划线的本质，其实就是在文字底下生成一张图片。因为文字换行的原因，那么最终生成的下划线可以是多条的，即多张图片，而且图片的宽度也是不定的。这里可以将下划线的生成情况分两种来分析。

a.不换行情况。这里先不管minY和maxY，可以看到，下划线的检测点就在start和end之间，其中v1是起始检测点，v2是终点检测点。当v2等于end-2时，检测结束，下划线只有一条，宽度即end-2到v1的长度。

b.换行情况。

当v1在“下”的左下角，v2在“下”的右下角时，无情况发生；

当v1在“下”的左下角，v2在“划”的右下角时，检测到了换行，v2移动到“下”的右下角，在“下”添加一条下划线，同时将v1移动到“划”的左下角；

当v1在“划”的左下角，v2在“线”的右下角时，检测到了换行，并且此时v2处于end-2的检测点，v2移动到“划”的右下角，在“划”添加一条下划线，同时将v1移动到“线”的左下角；

当v1在“线”的左下角，v2在“线”的右下角时，没有检测到换行，在“线”添加一条下划线，最后退出循环。

 

3.生成下划线

经过CalculateLayoutWithImage这个方法后，可以得到一个去掉了图片标签的字符串，以及对应的顶点列表(包含后缀四个顶点)。利用这个顶点列表，就可以计算出下划线的位置、长度等。

 

综上，可以得出如下的代码：

using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Text;
using UnityEngine.EventSystems;
using System;
using UnityEngine;
using UnityEngine.UI;

//图片<icon name=*** w=1 h=1 n=*** p=***/>
//下划线<material=underline c=#ffffff h=1 n=*** p=***>blablabla...</material>
public class RichText2 : Text {

    private FontData fontData = FontData.defaultFontData;

    //--------------------------------------------------------图片 start
    private static readonly string replaceStr = "\u00A0";
    private static readonly Regex imageTagRegex = new Regex(@"<icon name=([^>\s]+)([^>]*)/>");//(名字)(属性)
    private static readonly Regex imageParaRegex = new Regex(@"(\w+)=([^\s]+)");//(key)=(value)
    private List<RichTextImageInfo> imageInfoList = new List<RichTextImageInfo>();
    private bool isImageDirty = false;
    //--------------------------------------------------------图片 end

    //--------------------------------------------------------文字 start
    private RichTextParser richTextParser = new RichTextParser();
    //--------------------------------------------------------文字 end

    //--------------------------------------------------------事件 start
    
    //--------------------------------------------------------事件 end

    protected RichText2()
    {
        fontData = typeof(Text).GetField("m_FontData", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).GetValue(this) as FontData;
    }

    readonly UIVertex[] m_TempVerts = new UIVertex[4];
    protected override void OnPopulateMesh(VertexHelper toFill)
    {
        if (font == null)
            return;

        // We don't care if we the font Texture changes while we are doing our Update.
        // The end result of cachedTextGenerator will be valid for this instance.
        // Otherwise we can get issues like Case 619238.
        m_DisableFontTextureRebuiltCallback = true;

        //处理图片标签
        string richText = text;
        IList<UIVertex> verts = null;
        richText = CalculateLayoutWithImage(richText, out verts);

        //处理文字标签
        List<RichTextTag> tagList = null;
        richTextParser.Parse(richText, out tagList);
        for (int i = 0; i < tagList.Count; i++)
        {
            RichTextTag tag = tagList[i];
            switch (tag.tagType)
            {
                case RichTextTagType.None:
                    break;
                case RichTextTagType.Underline:
                    ApplyUnderlineEffect(tag as RichTextUnderlineTag, verts);
                    break;
                default:
                    break;
            }
        }

        Vector2 extents = rectTransform.rect.size;

        var settings = GetGenerationSettings(extents);
        cachedTextGenerator.Populate(text, settings);

        Rect inputRect = rectTransform.rect;

        // get the text alignment anchor point for the text in local space
        Vector2 textAnchorPivot = GetTextAnchorPivot(fontData.alignment);
        Vector2 refPoint = Vector2.zero;
        refPoint.x = Mathf.Lerp(inputRect.xMin, inputRect.xMax, textAnchorPivot.x);
        refPoint.y = Mathf.Lerp(inputRect.yMin, inputRect.yMax, textAnchorPivot.y);

        // Determine fraction of pixel to offset text mesh.
        Vector2 roundingOffset = PixelAdjustPoint(refPoint) - refPoint;

        // Apply the offset to the vertices
        //IList<UIVertex> verts = cachedTextGenerator.verts;
        float unitsPerPixel = 1 / pixelsPerUnit;
        //Last 4 verts are always a new line...
        int vertCount = verts.Count - 4;

        toFill.Clear();
        if (roundingOffset != Vector2.zero)
        {
            for (int i = 0; i < vertCount; ++i)
            {
                int tempVertsIndex = i & 3;
                m_TempVerts[tempVertsIndex] = verts[i];
                m_TempVerts[tempVertsIndex].position *= unitsPerPixel;
                m_TempVerts[tempVertsIndex].position.x += roundingOffset.x;
                m_TempVerts[tempVertsIndex].position.y += roundingOffset.y;
                if (tempVertsIndex == 3)
                    toFill.AddUIVertexQuad(m_TempVerts);
            }
        }
        else
        {
            //Debug.Log(unitsPerPixel);
            for (int i = 0; i < vertCount; ++i)
            {
                int tempVertsIndex = i & 3;
                m_TempVerts[tempVertsIndex] = verts[i];
                m_TempVerts[tempVertsIndex].position *= unitsPerPixel;
                if (tempVertsIndex == 3)
                    toFill.AddUIVertexQuad(m_TempVerts);
                //Debug.LogWarning(i + "_" + tempVertsIndex + "_" + m_TempVerts[tempVertsIndex].position);
            }
        }
        m_DisableFontTextureRebuiltCallback = false;
    }

    protected string CalculateLayoutWithImage(string richText, out IList<UIVertex> verts)
    {
        Vector2 extents = rectTransform.rect.size;
        var settings = GetGenerationSettings(extents);

        float unitsPerPixel = 1 / pixelsPerUnit;

        float spaceWidth = cachedTextGenerator.GetPreferredWidth(replaceStr, settings) * unitsPerPixel;

        float fontSize2 = fontSize * 0.5f;

        //解析图片标签，并将标签替换为空格
        imageInfoList.Clear();
        Match match = null;
        StringBuilder builder = new StringBuilder();
        while ((match = imageTagRegex.Match(richText)).Success)
        {
            RichTextImageInfo imageInfo = new RichTextImageInfo();
            imageInfo.name = match.Groups[1].Value;
            string paras = match.Groups[2].Value;
            if (!string.IsNullOrEmpty(paras))
            {
                var keyValueCollection = imageParaRegex.Matches(paras);
                for (int i = 0; i < keyValueCollection.Count; i++)
                {
                    string key = keyValueCollection[i].Groups[1].Value;
                    string value = keyValueCollection[i].Groups[2].Value;
                    imageInfo.SetValue(key, value);
                }
            }
            imageInfo.size = new Vector2(fontSize2 * imageInfo.widthScale, fontSize2 * imageInfo.heightScale);
            imageInfo.startVertex = match.Index * 4;
            int num = Mathf.CeilToInt(imageInfo.size.x / spaceWidth);//占据几个空格
            imageInfo.vertexLength = num * 4;
            imageInfoList.Add(imageInfo);

            builder.Length = 0;
            builder.Append(richText, 0, match.Index);
            for (int i = 0; i < num; i++)
            {
                builder.Append(replaceStr);
            }
            builder.Append(richText, match.Index + match.Length, richText.Length - match.Index - match.Length);
            richText = builder.ToString();
        }

        // Populate charaters
        cachedTextGenerator.Populate(richText, settings);
        verts = cachedTextGenerator.verts;
        // Last 4 verts are always a new line...
        int vertCount = verts.Count - 4;

        //换行处理
        //0 1|4 5|8  9
        //3 2|7 6|11 10
        //例如前两个字为图片标签，第三字为普通文字；那么startVertex为0，vertexLength为8
        for (int i = 0; i < imageInfoList.Count; i++)
        {
            RichTextImageInfo imageInfo = imageInfoList[i];
            int startVertex = imageInfo.startVertex;
            int vertexLength = imageInfo.vertexLength;
            int maxVertex = Mathf.Min(startVertex + vertexLength, vertCount);
            //如果最边缘顶点超过了显示范围，则将图片移到下一行
            //之后的图片信息中的起始顶点都往后移
            if (verts[maxVertex - 2].position.x * unitsPerPixel > rectTransform.rect.xMax)
            {
                richText = richText.Insert(startVertex / 2, "\r\n");
                for (int j = i; j < imageInfoList.Count; j++)
                {
                    imageInfoList[j].startVertex += 8;
                }
                cachedTextGenerator.Populate(richText, settings);
                verts = cachedTextGenerator.verts;
                vertCount = verts.Count - 4;
            }
        }

        //计算位置
        for (int i = imageInfoList.Count - 1; i >= 0; i--)
        {
            RichTextImageInfo imageInfo = imageInfoList[i];
            int startVertex = imageInfo.startVertex;
            if (startVertex < vertCount)
            {
                UIVertex uiVertex = verts[startVertex];
                Vector2 pos = uiVertex.position;
                pos *= unitsPerPixel;
                pos += new Vector2(imageInfo.size.x * 0.5f, fontSize2 * 0.5f);
                pos += new Vector2(rectTransform.sizeDelta.x * (rectTransform.pivot.x - 0.5f), rectTransform.sizeDelta.y * (rectTransform.pivot.y - 0.5f));
                imageInfo.position = pos;
                imageInfo.color = Color.white;
            }
            else
            {
                imageInfoList.RemoveAt(i);
            }
        }

        isImageDirty = true;

        return richText;
    }

    private void ApplyUnderlineEffect(RichTextUnderlineTag tag, IList<UIVertex> verts)
    {
        float fontSize2 = fontSize * 0.5f;
        float unitsPerPixel = 1 / pixelsPerUnit;

        //0 1|4 5|8  9 |12 13
        //3 2|7 6|11 10|14 15
        //<material=underline c=#ffffff h=1 n=1 p=2>下划线</material>
        //以上面为例:
        //tag.start为42，对应“>” | start对应“下”的左上角顶点
        //tag.end为44，对应“划”  | end对应“线”下一个字符的左上角顶点
        //Debug.Log(tag.start);
        //Debug.Log(tag.end);
        int start = tag.start * 4;
        int end = Mathf.Min(tag.end * 4 + 4, verts.Count);
        UIVertex vt1 = verts[start + 3];
        UIVertex vt2;
        float minY = vt1.position.y;
        float maxY = verts[start].position.y;

        //换行处理，如需换行，则将一条下划线分割成几条
        //顶点取样分布，如上图的2，6，10，其中end - 2表示最后一个取样点，即10
        //对应例子中的下、划、线的右下角顶点
        for (int i = start + 2; i <= end - 2; i += 4)
        {
            vt2 = verts[i];
            bool newline = Mathf.Abs(vt2.position.y - vt1.position.y) > fontSize2;
            if (newline || i == end - 2)
            {
                RichTextImageInfo imageInfo = new RichTextImageInfo();

                //计算宽高
                int tailIndex = !newline && i == end - 2 ? i : i - 4;
                vt2 = verts[tailIndex];
                minY = Mathf.Min(minY, vt2.position.y);
                maxY = Mathf.Max(maxY, verts[tailIndex - 1].position.y);
                imageInfo.size = new Vector2((vt2.position.x - vt1.position.x) * unitsPerPixel, tag.height);

                //计算位置
                Vector2 vertex = new Vector2(vt1.position.x, minY);
                vertex *= unitsPerPixel;
                vertex += new Vector2(imageInfo.size.x * 0.5f, -tag.height * 0.5f);
                vertex += new Vector2(rectTransform.sizeDelta.x * (rectTransform.pivot.x - 0.5f), rectTransform.sizeDelta.y * (rectTransform.pivot.y - 0.5f));
                imageInfo.position = vertex;

                imageInfo.color = tag.color;
                imageInfoList.Add(imageInfo);

                vt1 = verts[i + 1];
                minY = vt1.position.y;
                if (newline && i == end - 2) i -= 4;
            }
            else
            {
                minY = Mathf.Min(minY, verts[i].position.y);
                maxY = Mathf.Max(maxY, verts[i - 1].position.y);
            }
        }
    }

    protected void Update()
    {
        if (isImageDirty)
        {
            isImageDirty = false;

            //回收当前的图片
            Image[] images = GetComponentsInChildren<Image>(true);
            for (int i = 0; i < images.Length; i++)
            {
                RichTextResourceManager.Instance.SetPoolObject(RichTextResourceType.Image, images[i].gameObject);
            }

            //生成图片
            for (int i = 0; i < imageInfoList.Count; i++)
            {
                RichTextImageInfo imageInfo = imageInfoList[i];
                var name = imageInfo.name;
                var position = imageInfo.position;
                var size = imageInfo.size;
                var color = imageInfo.color;

                GameObject go = RichTextResourceManager.Instance.GetPoolObject(RichTextResourceType.Image);
                Image image = go.GetComponent<Image>();
                RichTextResourceManager.Instance.SetSprite(name, image);
                go.transform.SetParent(rectTransform);
                go.transform.localScale = Vector3.one;
                image.rectTransform.anchoredPosition = position;
                image.rectTransform.sizeDelta = size;
                image.color = color;
            }
        }
    }
}

 

效果如下：