cocosjs自定义富文本控件
Cocosjs自定义富文本控件
最近项目开发做到聊天模块,聊天的内容希望以富文本来呈现,cocos引擎带有富文本控件,支持文本,图片,动画和自定义类型节点,其优点是:
a支持文本,图片,动画和自定义类型节点
b.支持push节点和insert节点
c.内部自动更新排序位置
缺点:
- 使用比较麻烦,创建文本控件需要传很多参数
- 需要显式注册触摸事件
- 文本无法在超过指定宽度时自动换行
- 不支持下划线
下面来看一下需求:
- 支持文本,图片,动画
- 支持下划线
- 支持触摸事件
- 文本在超过指定宽度时自动换行(若是单词不能截断单词)
- 便捷的使用方式
对比需求,其实大部分引擎的富文本已经支持了,起初的想法是在引擎的基础上再封装一层,不过苦于需求的d点,超过宽度自动换行,比较难处理,所以还是自己自定义一个富文本控件,实现下划线并将其他几种基础控件组合起来使用。
下面说下大致的处理逻辑:
数据源:为了更友好的使用,数据源使用json以数组的方式使用,数组内是多个object对象,定义文本内容,文本颜色,文本大小,是否下划线,是否注册触摸事件,是否使用action,图片路径,动画路径,播放的动画名,
如下图:
创建一个富文本对象,传入数据源,其他的交由富文本内部处理,下面来看下内部处理逻辑:
取得数据源,解析成文本类型,图片类型,动画类型分别单独处理
对应的类型生成对应的控件,按照从左往右的顺序添加,如果剩余的宽度不够容纳控件,则进行换行操作,换行前更新当前行所有的控件,以高度最高的控件的高度的一半为中心点,垂直方向对齐,以其类推处理完所有数据。
其中最复杂的是文本的处理,下面看看处理流程:
文本:
a.从数据源取得文本类型的数据
b.解析文本,以换行符将文本截断成多行,一个换行符为换行,n个连续的换行符则为n-1个空白行
c.得到被处理成多行文本的内容后,每取出一行生成一个文本控件,计算剩余的宽度是否足够容纳控件,如果不够,则需求将文本截成左右两部分,要求不能截断完整的单词,左部分文本生成文本控件添加,换行,然后处理右部分文本,按照上面的步骤再做一次,如果文本长度超出剩余宽度且无法截断,则需要强制截断。
图片:
图片的处理比较简单,从数据源中取得图片路径,生成一个Sprite添加就行了。
动画:
动画的处理也比较简单,从数据源中取得动画路径,动画名,生成一个
Armature,播放动画就行了。
自定义的富文本实现debug模式,需要调位置的时候可以打开看下效果,下面是使用截图:
代码可在github上下载