【Unity】用Text+Image实现神奇的文字下划线

797 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

写需求的时候搜了一些文字加下划线的方法,UGUI的Text,大都需要写一堆代码来封装Text,比较麻烦

考虑过用TextMeshPro,不过TextMeshPro不能公用Text的字体,有点坑

利用Text加Image试了一下,实现效果看着还不错

  1. 给Text加一个Image作为子物体

  1. 给Text所在节点添加Conrtent Size Fitter组件,修改水平适配方式为Preferred Size,用于自动适配Text宽度(Text宽度会根据文字长度自动缩放)

  1. 修改Image节点的锚点(保证Image的宽度,会跟随父节点的宽度自动缩放,实现效果:下划线的Image宽度,跟随Text的文字长度自动缩放),调整高度,颜色与文字颜色一致(当然,也可以根据需求修改颜色、甚至是下划线的图形)

 

  1. 如果Text的文字会动态修改Color,要注意同时修改子物体Image的颜色(最高监听文字颜色的变化,自动修改下划线Image的颜色)

  2. 因为是由两个独立的组件实现的下划线,可以自由设置下划线的形状、位置、高度、颜色,比如波浪下划线?双下划线?特殊图形下划线?上划线?中划线?粗的?细的?红的?绿的?比如文字黑色,下划线红色,神奇!可以做出一些奇奇怪怪的表现效果

  3. 毕竟不是常规的做法,实现方式存在一些问题,比如,文字不能换行,换行后下划线的高度位置会偏移,而且多行文字只有一行下划线;文字BestFit自动适配大小时,文字字号大小变化但下划线高度不会变化,看起来会有一些别扭。所以这种实现方式仅限于单行文字固定字号的情况,更复杂的情况用起来会有一些限制···