[UGUI]图文混排(四)：插入图片

参考链接：

http://www.cnblogs.com/leoin2012/p/7162099.html

0.图片标签和图片类

标签格式：<icon name=*** w=1 h=1 n=*** p=***/>

RichTextImageInfo.cs

using UnityEngine;

public class RichTextImageInfo
{
    public string name;       //名字(路径)
    public Vector2 size;      //宽高
    public Vector2 position;  //位置
    public int startVertex;   //起始顶点
    public int vertexLength;  //占据顶点数
    public Color color;       //颜色

    //标签属性
    public float widthScale = 1f;//宽度缩放
    public float heightScale = 1f;//高度缩放
    public string eventName;//事件名
    public string eventParameter;//事件参数

    public void SetValue(string key, string value)
    {
        switch (key)
        {
            case "w":
                {
                    float.TryParse(value, out widthScale);
                    break;
                }
            case "h":
                {
                    float.TryParse(value, out heightScale);
                    break;
                }
            case "n":
                {
                    eventName = value;
                    break;
                }
            case "p":
                {
                    eventParameter = value;
                    break;
                }
            default:
                break;
        }
    }
}

1.用空格替换图片标签

a.选择空格符

换行空格：Space键输出的空格，Unicode编码为u0020，空格前后的内容是允许自动换行的。

不换行空格：Unicode编码为u00A0，空格前后的内容是不允许自动换行的。

这里看一下两者的效果，如下图。上面的使用普通空格，而下面的使用不换行空格。

using UnityEngine.UI;
using UnityEngine;

[RequireComponent(typeof(Text))]
public class NonBreakingSpaceTextComponent : MonoBehaviour {

    public static readonly string no_breaking_space = "u00A0";
    protected Text text;

    void Awake()
    {
        text = this.GetComponent<Text>();
        text.RegisterDirtyVerticesCallback(OnTextChange);
    }

    public void OnTextChange()
    {
        if (text.text.Contains(" "))
        {
            text.text = text.text.Replace(" ", no_breaking_space);
        }
    }
}

显然这里选择不换行空格来进行替换。

b.计算图片所占空格数

首先要知道一个空格所占的宽度，图片的宽度，这样才能算出图片占几个空格，对应的，就是将标签替换为几个空格。

2.换行处理

当图片超过文本框边界时，在空格前插入换行符使图片换行。

3.图片位置计算

图片的位置为这些空格所占位置的中间

4.标签格式简化(待优化)

可以使用如{0}，{1}这样的方式来简化图片路径标签，然后读取配置替换为真实的路径。

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

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

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

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

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

效果如下：