UGUI实现随意调整Text中的字体间距
ugui中是没有可以随意调整字体间的距离的方法,仔细研究一下可以通过控制每个字体的网格顶点位置进行调整字体之间的距离,分析一下最简单情况:输入的文本是单行的,且末尾没有换行符;
unity在unityengine.ui命名空间中定义了一个basemesheffect抽象类,他提供了一个抽象方法modifymesh(vertexhelper vh),使得可以轻松地获得text文本中所有字体 的顶点信息,我们的移动字体的操作将在这里面进行。vertexhelper类主要是用于提供字体网格数据的工具类;
上述便是挂载testspacingtext脚本之后的效果图。下面贴出代码
using system.collections; using system.collections.generic; using unityengine; using unityengine.ui; public class textspacingtest : basemesheffect { public float spacing = 0; public override void modifymesh(vertexhelper vh) { list<uivertex> vertexs = new list<uivertex>(); vh.getuivertexstream(vertexs); int vertexindexcount = vertexs.count; for (int i = 6; i < vertexindexcount; i++) { uivertex v = vertexs[i]; v.position += new vector3(spacing * (i / 6), 0, 0); vertexs[i] = v; if (i % 6 <= 2) { vh.setuivertex(v, (i / 6) * 4 + i % 6); } if (i % 6 == 4) { vh.setuivertex(v, (i / 6) * 4 + i % 6 - 1); } } } }
分析代码:
1)首先创建一个字体间距的变量,然后需要继承basemesheffect类并且实现其中的抽象的方法meshmodify()函数。
2)创建一个容器从网格信息生成器vh中将字体的顶点信息全部加载保存下来
3)接下来开始遍历获取到的顶点,我们知道每个字体是由两个三角形的组成的网格,字体是显示在这样的网格上的,因此每个字体也就对应6个顶点。那么就开始移动每个顶点就可以了。
4)移动顶点之后要记得设置uv顶点与顶点索引的对应关系,因为一个字体网格由两个三角形组成,那么就重叠了两个顶点,故而一个字体的6个顶点,就只对应4个uv顶点索引,如上代码显示的那样。
分析如下:
接下来看看比较复杂的情况:
文本的情况为,可以有多行,或单行,单行、多行时末尾均可以有换行符。
核心思路:
1)先考虑仅仅是多行且末尾行的末尾没有换行符的情况,解决了这个核心问题,再考虑其他的问题。
2)将多行的文本按照换行符进行分割,这样每一行就形成了一个字符串,此时对每一行进行上面简单的操作,就可以实现移动的了。
3)考虑到所有的文本的顶点信息数据都存储在vh中,可以创建一个行数据结构line以此来存储每行的基本属性(比如:本行开始定点的索引位置,结束顶点的索引位置,所有顶点的数量)。
4)简单多行的情况,利用上面的分行的思路就可以解决,接下来分析其他的问题。
5)单行时末尾有换行符,我们在分割字符串之后要加以判断是否有空串的情况 ,若有那么就认为末尾产生了换行符,此时空串不再创建line对象,只用创建一个line对象。解法看代码。
6)多行时末尾有换行符,同样用于上面一样的方法进行检验,最后一个空串不在创建line对象,解法看代码。
7)之后若是想扩展修改字体垂直方向的间距也可以在此基础上修改,非常简单。
接下来看代码:
using unityengine; using system.collections; using unityengine.ui; using system.collections.generic; internal class line { //每行开始顶点索引 private int startvertexindex; public int startvertexindex { get { return startvertexindex; } } //每行结束顶点索引 private int endvertexindex; public int endvertexindex { get { return endvertexindex; } } //每行顶点总量 private int countvertexindex; public int countvertexindex { get { return countvertexindex; } } public line(int startvertexindex,int countvertexindex) { this.startvertexindex = startvertexindex; this.countvertexindex = countvertexindex; this.endvertexindex = this.startvertexindex + countvertexindex - 1; } } /// <summary> /// 这是设置字体移动的核心类 /// 执行多重行移动的核心算法是:将多重行分开依次进行处理,每一行的处理都是前面对单行处理的子操作 /// 但是由vh是记录一个文本中所有的字的顶点,所以说需要分清楚每行开始,每行结束,以及行的字个数, /// 如此需要创建一个行的数据结构,以保存这些信息 /// </summary> public class textspacingmultest : basemesheffect { public float spacing = 0; public override void modifymesh(vertexhelper vh) { text text = getcomponent<text>(); string[] ls = text.text.split('\n'); int length = ls.length; bool isnewline = false; line[] line; if (string.isnullorempty(ls[ls.length - 1]) == true) { line = new line[length - 1]; isnewline = true; } else { line = new line[length]; } //debug.log("ls长度" + ls.length); for (int i = 0; i < line.length; i++) { if (i == 0 && line.length == 1&&isnewline==false)//解决单行时没有换行符的情况 { line[i] = new line(0, ls[i].length * 6); break; } if (i == 0&&line.length>=1)//解决单行时有换行符的情况,以及多行时i为0的情况 { line[i] = new line(0, (ls[i].length+1) * 6); } else { if (i < line.length - 1) { line[i] = new line(line[i - 1].endvertexindex + 1, (ls[i].length + 1) * 6); } else { if (isnewline == true)//解决多行时,最后一行末尾有换行符的情况 { line[i] = new line(line[i - 1].endvertexindex + 1, (ls[i].length + 1) * 6); } else { line[i] = new line(line[i - 1].endvertexindex + 1, ls[i].length * 6); } } } } list<uivertex> vertexs = new list<uivertex>(); vh.getuivertexstream(vertexs); int countvertexindex = vertexs.count; //debug.log("顶点总量" + vertexs.count); for (int i = 0; i < line.length; i++) { if (line[i].countvertexindex == 6) { continue; } for (int k = line[i].startvertexindex+6; k <= line[i].endvertexindex; k++) { uivertex vertex = vertexs[k]; vertex.position += new vector3(spacing * ((k-line[i].startvertexindex) / 6), 0, 0); //debug.log("执行"); vertexs[k] = vertex; if (k % 6 <= 2) { vh.setuivertex(vertex, (k / 6) * 4 + k % 6); } if (k % 6 == 4) { vh.setuivertex(vertex, (k / 6) * 4 + k % 6 - 1); } } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Photoshop制作甜美的圣诞红白镶嵌的条纹糖果积雪字
下一篇: CAD编辑器怎么绘制箭头指引线?