[UGUI]图文混排(六)：点击区域

点击区域可以分成两部分来分析：

0.Rect

搜索api：Rect和Rect.Rect，可以知道：

在GUI和GUILayout中，Rect的原点在左上角，向右为x轴正方向，向下为y轴正方向；

除此之外，其他情况下Rect的原点在左下角，向右为x轴正方向，向上为y轴正方向。

1.区域的判定

a.图片的可点击区域：整张图片

b.文字的可点击区域：下划线上的文字

2.点击响应

计算出区域后，因为这个区域是局部坐标系的，再将点击坐标转换为text中的局部坐标，判定该坐标是否在区域内，即可完成点击响应。

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

RichTextEvent.cs

using UnityEngine;

public class RichTextEvent {

    public Rect rect;//触发事件的判定区域
    public string name;//事件名
    public string parameter;//事件参数
}

RichText.cs

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 RichText : Text, IPointerClickHandler {

    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
    private Action<string, string> clickAction;
    private List<RichTextEvent> eventList = new List<RichTextEvent>();
    //--------------------------------------------------------事件 end

    //--------------------------------------------------------调试 start
    private bool isShowClickArea = true;//是否显示可点击区域
    //--------------------------------------------------------调试 end

    protected RichText()
    {
        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;

        //处理事件
        eventList.Clear();

        //处理图片标签
        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 / 4, "
");
                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;

                if (!string.IsNullOrEmpty(imageInfo.eventName))
                {
                    //图片pos：
                    //x:起点x + 图片宽度的一半
                    //y:起点y + fontSize2 * 0.5f
                    RichTextEvent e = new RichTextEvent();
                    e.name = imageInfo.eventName;
                    e.parameter = imageInfo.eventParameter;
                    e.rect = new Rect(
                        verts[startVertex].position.x * unitsPerPixel,
                        verts[startVertex].position.y * unitsPerPixel + fontSize2 * 0.5f - imageInfo.size.y * 0.5f,
                        imageInfo.size.x,
                        imageInfo.size.y
                    );
                    eventList.Add(e);
                }
            }
            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);

                if (!string.IsNullOrEmpty(tag.eventName))
                {
                    //下划线pos：
                    //x:vt1.x + 图片宽度的一半
                    //y:minY - tag.height * 0.5f
                    RichTextEvent e = new RichTextEvent();
                    e.name = tag.eventName;
                    e.parameter = tag.eventParameter;
                    e.rect = new Rect(
                        vt1.position.x * unitsPerPixel,
                        minY * unitsPerPixel,
                        imageInfo.size.x,
                        (maxY - minY) * unitsPerPixel
                    );
                    eventList.Add(e);
                }

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

    public void SetListener(Action<string, string> action)
    {
        clickAction = action;
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        Vector2 localPos;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, eventData.position, eventData.pressEventCamera, out localPos);
        for (int i = eventList.Count - 1; i >= 0; i--)
        {
            RichTextEvent e = eventList[i];
            if (e.rect.Contains(localPos))
            {
                clickAction.Invoke(e.name, e.parameter);
                break;
            }
        }
    }

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

            //点击区域
            if (isShowClickArea)
            {
                for (int i = 0; i < eventList.Count; i++)
                {
                    RichTextEvent e = eventList[i];

                    GameObject go = RichTextResourceManager.Instance.GetPoolObject(RichTextResourceType.Image);
                    Image image = go.GetComponent<Image>();
                    RichTextResourceManager.Instance.SetSprite("", image);
                    go.transform.SetParent(rectTransform);
                    go.transform.localScale = Vector3.one;
                    image.rectTransform.anchoredPosition = e.rect.center;
                    image.rectTransform.sizeDelta = new Vector2(e.rect.width, e.rect.height);
                    image.color = Color.blue;
                }
            }
        }
    }

    protected override void OnDestroy()
    {
        base.OnDestroy();
        //Debug.LogWarning("OnDestroy");
    }
}

效果如下图。其中蓝色区域即为点击区域。绑定监听后，点击图片或下划线上的文字，即可看到事件被响应了。