cocosjs自定义富文本控件

发表于2015-10-30
评论0 1.3k浏览

Cocosjs自定义富文本控件

 

最近项目开发做到聊天模块,聊天的内容希望以富文本来呈现,cocos引擎带有富文本控件,支持文本,图片,动画和自定义类型节点,其优点是:

a支持文本,图片,动画和自定义类型节点

b.支持push节点和insert节点

c.内部自动更新排序位置

 

缺点:

  1. 使用比较麻烦,创建文本控件需要传很多参数
  2. 需要显式注册触摸事件
  3. 文本无法在超过指定宽度时自动换行
  4. 不支持下划线

 

下面来看一下需求:

  1. 支持文本,图片,动画
  2. 支持下划线
  3. 支持触摸事件
  4. 文本在超过指定宽度时自动换行(若是单词不能截断单词)
  5. 便捷的使用方式

 

对比需求,其实大部分引擎的富文本已经支持了,起初的想法是在引擎的基础上再封装一层,不过苦于需求的d点,超过宽度自动换行,比较难处理,所以还是自己自定义一个富文本控件,实现下划线并将其他几种基础控件组合起来使用。

 

下面说下大致的处理逻辑:

数据源:为了更友好的使用,数据源使用json以数组的方式使用,数组内是多个object对象,定义文本内容,文本颜色,文本大小,是否下划线,是否注册触摸事件,是否使用action,图片路径,动画路径,播放的动画名,

如下图:

 

创建一个富文本对象,传入数据源,其他的交由富文本内部处理,下面来看下内部处理逻辑:

取得数据源,解析成文本类型,图片类型,动画类型分别单独处理

对应的类型生成对应的控件,按照从左往右的顺序添加,如果剩余的宽度不够容纳控件,则进行换行操作,换行前更新当前行所有的控件,以高度最高的控件的高度的一半为中心点,垂直方向对齐,以其类推处理完所有数据。

其中最复杂的是文本的处理,下面看看处理流程:

文本:

a.从数据源取得文本类型的数据

b.解析文本,以换行符将文本截断成多行,一个换行符为换行,n个连续的换行符则为n-1个空白行

c.得到被处理成多行文本的内容后,每取出一行生成一个文本控件,计算剩余的宽度是否足够容纳控件,如果不够,则需求将文本截成左右两部分,要求不能截断完整的单词,左部分文本生成文本控件添加,换行,然后处理右部分文本,按照上面的步骤再做一次,如果文本长度超出剩余宽度且无法截断,则需要强制截断。

 

图片:

图片的处理比较简单,从数据源中取得图片路径,生成一个Sprite添加就行了。

 

动画:

动画的处理也比较简单,从数据源中取得动画路径,动画名,生成一个

Armature,播放动画就行了。

 

 

自定义的富文本实现debug模式,需要调位置的时候可以打开看下效果,下面是使用截图:

 

代码可在github上下载

Github地址:https://github.com/malloyz/customRichText/

 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

0个评论