好久没有来更新了，甚至我的账号都掉了，试了半天才搞对密码。
最近也真的是很忙，甚至上周日差点加班，幸好……
废话不多说，开始了！！！
废话
首先说明，这个大标题都是废话，可以跳过。
图文混排，这是一个项目中最常见的功能了。没错，我们的项目也有这个需求，幸运的是，我不会呀！要不也不会来写这片文章了。
不光不会，我甚至觉得这东西贼麻烦，想尽量往后拖。然而他们给我安排的时间实在是太多了，不弄不行了。
于是开始百度一下别人写好的东西。
看到第一种，把要需要的图片打个图集，然后用Mesh贴上去。嗯，局限性很大，根本不是我所能理解的，引用过来也不知道能不能正常运行，还要单打一个图集出来，性能也不了解，有问题我也不会改……
然后是第二种，做一个Asset文件，把需要的图片加进去，然后自己命名，设置尺寸……个人认为还不如第一种，不过他是用来做gif效果的。但是大部分的项目不用这么麻烦的东西，还不如直接弄个Skeleton插件进来了，再套用第三种方法就行了。
最后是第三种，修改Text的OnPopulateMesh方法，在获取顶点信息的过程中，通过正则来把图片的字符串改为宽度合适的空格，并记录图片相关数据。接着在物体上挂载几个Image，把图片信息赋值进去。
第三种方式看起来不错，主要是他给的代码很全，逻辑也很容易看。然而弄着弄着，发现很多问题，特别是位置各种不对。只能默默的改，改了半天，终于看起来差不多了。
就这样平静的过了两个月，来了一个单子【在不同分别率下，图文混排位置不对】
太难受了，只能一点一点的重新看了起来，开始下断点看各个顶点信息。终于解决了一大堆问题，比如说图片占位的空格数量并不对，计算图片位置中心的顶点并不对，没有把换行和原有的空格计算等等……
果然人是不能懒的，之前没有完全看透，现在被迫完全梳理了一下逻辑。-_-
就这样，我以为终于要结束了，然而昨天又给我提了个单子【在手机上，偶现出只有图片没有文字的情况】
这我就很苦恼了，开始各种排查，最终大概知道了，应该是OnPopulateMesh的问题，但是这该咋改……
一直到晚上，我睡觉前也在想这个问题，突然想到，我可以把覆写text的set方法，输入的时候就把文字替换成最终的结果。这样的话在底层逻辑下触发OnPopulateMesh，这总不该有问题了。
于是今天，我来到了公司，去git上找了UGUI2019的源码，看了下text的逻辑。把覆写的OnPopulateMesh方法注掉，在text的set方法里，对m_Text直接做正则处理。试了一下，倒是可以了。
正当我高兴的时候，我发现新的问题了。因为是在set方法做的处理，所以会对m_Text的值做彻底覆盖。这就意味着，如果是直接坐在预制体里的，原来的值就完全丢失了。
emmmm，只好再改回去。看来只能看一下OnPopulateMesh方法是哪里出问题了。我就在源码里继续看OnPopulateMesh的写法。发现和我从网上找的方法有很多不同。
我明白了，因为我复制来的方法是2017的，而现在的项目是2019的，所以底层逻辑是不同的。应该就是这个问题了。
但是新的担忧又来了，因为git上的是2019.1.05的，而我的项目是2019.4的，我不能确保代码是有效的。而且万一后面又要用2018或2020甚至2025那？
我只好重新梳理一下逻辑，发现OnPopulateMesh方法里调用了text，也就是说OnPopulateMesh覆写的核心就是获取将text修改为正确的即可。那我岂不是可以在text的get方法里做计算修改。
试了一下，注掉OnPopulateMesh方法，覆写text的get方法。
就成功了，好家伙，原来只需要改源码就行了。
废话真的结束了，开始搞~
正文
这里才是真的代码逻辑部分
首先说一下这个做法的逻辑。
1.当输入文本的时候，会触发SetVerticesDirty和SetLayoutDirty两个方法，通知底层当前的渲染信息脏了，然后就会主动触发OnPopulateMesh。
2.修改text的get方法，将本来应该返回的m_Text重新修正。但是不要修改m_Text自身，防止污染自身数据。
3.修正的逻辑就是先用正则将<icon=XXX>的部分移除，将其替换为合适数量的空格。再将图片的属性录入到列表中。
4.创建对应数量的Image，通过图片的属性修改显示。
然后说一下图文混排文本的写法
This script can show <icon name=xxx size=40 x=0 y=0/> and string.
脚本的私有变量
public class MixedPicText : Text
{
//空格的编码（只读）
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>();
//是否图片有变化的Dirty
private bool isImageDirty = false;
//顶点信息，是在计算图片位置时需要的
private IList<UIVertex> verts = null;
//当前已经创建的图片
private List<RectTransform> showImageList = new List<RectTransform>();
}
图片的属性类
public class MixedPicTextImageInfo
{
public string name; //名字(路径)
public Vector2 position; //位置
public int startVertex; //起始顶点
public int vertexLength; //占据顶点数
//标签属性
public int size = 40; //尺寸
public float offsetX = 0f; //X偏移
public float offsetY = 0f; //Y偏移
public void SetValue(string key, string value)
{
switch (key)
{
case "size":
{
int.TryParse(value, out size);
break;
}
case "x":
{
float.TryParse(value, out offsetX);
break;
}
case "y":
{
float.TryParse(value, out offsetY);
break;
}
default:
break;
}
}
}
那么就来说一下拆解的方法
protected string CalculateLayoutWithImage(string richText)
{
//获取填充文本的生成设置
Vector2 extents = rectTransform.rect.size;
var settings = GetGenerationSettings(extents);
//计算空格的宽度
float unitsPerPixel = 1 / pixelsPerUnit;
float spaceWidth = cachedTextGenerator.GetPreferredWidth(replaceStr, settings) * unitsPerPixel;
//解析图片标签，并将标签替换为空格
imageInfoList.Clear();
Match match = null;
//创建一个StringBuilder，用来存储替换后的字符串
StringBuilder builder = new StringBuilder();
while ((match = imageTagRegex.Match(richText)).Success)
{
//拆解正则数据
MixedPicTextImageInfo imageInfo = new MixedPicTextImageInfo();
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.startVertex = match.Index * 4;
//占据几个空格 一般图片和文字间需要间距 所以多一个空格
int num = Mathf.CeilToInt(imageInfo.size / spaceWidth) + 1;
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();
}
//用新的文本来构成数据，获取新的顶点信息等
cachedTextGenerator.Populate(richText, settings);
verts = cachedTextGenerator.verts;
int vertCount = verts.Count;
//计算图片位置
for (int i = imageInfoList.Count - 1; i >= 0; i--)
{
MixedPicTextImageInfo imageInfo = imageInfoList[i];
int charIndex = imageInfo.startVertex / 4;
string str = richText.Substring(0, charIndex);
int newLine = str.Split('\n').Length - 1;
int whiteSpace = str.Split(' ').Length - 1;
int indexOfTextQuad = (charIndex * 4) - newLine * 4 - whiteSpace * 4;
if (indexOfTextQuad < vertCount) {
Vector2 pos = (verts[indexOfTextQuad].position +
verts[indexOfTextQuad + 1 + imageInfo.vertexLength - 4].position +
verts[indexOfTextQuad + 2 + imageInfo.vertexLength - 4].position +
verts[indexOfTextQuad + 3].position) / 4f;
//计算位置的缩放，在Canvas的RenderMode为ScreenSpaceCamera的情况下，不同分辨率的位置修正
float posScale = 1f;
#if UNITY_EDITOR
if (Application.isPlaying)
{
//todo UICanvas是我自己项目中的，就是获取canvas而已，根据自己需求来改
---
posScale = UICanvas.Get().canvas.scaleFactor;
---
}
else
{
if (canvas != null)
{
posScale = canvas.scaleFactor;
}
}
#else
posScale = UICanvas.Get().canvas.scaleFactor;
#endif
pos /= posScale;//适应不同分辨率的屏幕
pos += new Vector2(imageInfo.offsetX + spaceWidth / 2, imageInfo.size * 0.3f + imageInfo.offsetY);
imageInfo.position = pos;
} else {
imageInfoList.RemoveAt(i);
}
}
//此时认为图片有变化
isImageDirty = true;
return richText;
}
修正的字符串的方法好了，那么就可以开始实装了。
public override string text {
get
{
//覆写text的get方法，直接返回修正后的字符串。不要动m_Text，会导致数据修改且不可逆
return CalculateLayoutWithImage(m_Text);
}
set => base.text = value;
}
接着来说一下生成图片。原文章里是放在Update里，我不知道为什么，也没有试一下放在别的地方，所以就先保持原样。
protected void Update()
{
if (isImageDirty)
{
isImageDirty = false;
//用池的方法来创建图片
RectTransform imgTrans;
Image imageComp;
for (int i = 0; i < imageInfoList.Count; i++)
{
if (i < showImageList.Count)
{
imgTrans = showImageList[i];
imgTrans.gameObject.SetActive(true);
imageComp = imgTrans.GetComponent<Image>();
}
else
{
imgTrans = new GameObject("Image", typeof(RectTransform)).transform as RectTransform;
imgTrans.SetParent(transform);
imageComp = imgTrans.gameObject.AddComponent<Image>();
showImageList.Add(imgTrans);
}
MixedPicTextImageInfo imageInfo = imageInfoList[i];
imgTrans.localScale = Vector3.one;
//todo 这里直接使用自己项目中的加载图片的方法
---
imageComp.sprite = sprite;
---
imageComp.SetNativeSize();
imageComp.raycastTarget = false;
imgTrans.localScale = Vector3.one * imageInfo.size / imgTrans.rect.width;
imgTrans.anchoredPosition = imageInfo.position;
}
for (int i = imageInfoList.Count; i < showImageList.Count; i++)
{
showImageList[i].gameObject.SetActive(false);
}
}
}
}
最后还有两个覆写方法
//Awake的时候会触发SetDirty，所以先将原有的数据都清理掉，防止污染
protected override void Awake()
{
base.Awake();
showImageList.Clear();
for (int i = transform.childCount - 1; i >= 0; i--)
{
#if UNITY_EDITOR
if (Application.isPlaying)
{
#endif
Destroy(transform.GetChild(i).gameObject);
#if UNITY_EDITOR
}
else
{
DestroyImmediate(transform.GetChild(i).gameObject);
}
#endif
}
}
//这个方法是在编辑模式下的处理，不然打开预制体的时候，因为Awake的原因，图片被清理掉了。
protected override void Start()
{
base.Start();
OnPopulateMesh(new VertexHelper());
}
结语
这个只是昨天修改的，实际上还会不会有别的问题，还要再验。
如果有新的问题，我会再来改的。
