[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[];
     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 = ; 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 =  / pixelsPerUnit;
         //Last 4 verts are always a new line...
         int vertCount = verts.Count - ;

         toFill.Clear();
         if (roundingOffset != Vector2.zero)
         {
             for (int i = ; i < vertCount; ++i)
             {
                 int tempVertsIndex = i & ;
                 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 == )
                     toFill.AddUIVertexQuad(m_TempVerts);
             }
         }
         else
         {
             //Debug.Log(unitsPerPixel);
             for (int i = ; i < vertCount; ++i)
             {
                 int tempVertsIndex = i & ;
                 m_TempVerts[tempVertsIndex] = verts[i];
                 m_TempVerts[tempVertsIndex].position *= unitsPerPixel;
                 if (tempVertsIndex == )
                     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 =  / 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[].Value;
             string paras = match.Groups[].Value;
             if (!string.IsNullOrEmpty(paras))
             {
                 var keyValueCollection = imageParaRegex.Matches(paras);
                 for (int i = ; i < keyValueCollection.Count; i++)
                 {
                     string key = keyValueCollection[i].Groups[].Value;
                     string value = keyValueCollection[i].Groups[].Value;
                     imageInfo.SetValue(key, value);
                 }
             }
             imageInfo.size = new Vector2(fontSize2 * imageInfo.widthScale, fontSize2 * imageInfo.heightScale);
             imageInfo.startVertex = match.Index * ;
             int num = Mathf.CeilToInt(imageInfo.size.x / spaceWidth);//占据几个空格
             imageInfo.vertexLength = num * ;
             imageInfoList.Add(imageInfo);

             builder.Length = ;
             builder.Append(richText, , match.Index);
             for (int i = ; 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 - ;

         //换行处理
         //0 1|4 5|8  9
         //3 2|7 6|11 10
         //例如前两个字为图片标签，第三字为普通文字；那么startVertex为0，vertexLength为8
         for (int i = ; 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 - ].position.x * unitsPerPixel > rectTransform.rect.xMax)
             {
                 richText = richText.Insert(startVertex / , "\r\n");
                 for (int j = i; j < imageInfoList.Count; j++)
                 {
                     imageInfoList[j].startVertex += ;
                 }
                 cachedTextGenerator.Populate(richText, settings);
                 verts = cachedTextGenerator.verts;
                 vertCount = verts.Count - ;
             }
         }

         //计算位置
         for (int i = imageInfoList.Count - ; i >= ; 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 =  / 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 * ;
         int end = Mathf.Min(tag.end *  + , verts.Count);
         UIVertex vt1 = verts[start + ];
         UIVertex vt2;
         float minY = vt1.position.y;
         float maxY = verts[start].position.y;

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

                 //计算宽高
                 int tailIndex = !newline && i == end -  ? i : i - ;
                 vt2 = verts[tailIndex];
                 minY = Mathf.Min(minY, vt2.position.y);
                 maxY = Mathf.Max(maxY, verts[tailIndex - ].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 + ];
                 minY = vt1.position.y;
                 if (newline && i == end - ) i -= ;
             }
             else
             {
                 minY = Mathf.Min(minY, verts[i].position.y);
                 maxY = Mathf.Max(maxY, verts[i - ].position.y);
             }
         }
     }

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

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

             //生成图片
             for (int i = ; 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;
             }
         }
     }
 }

效果如下：