cocos2dx实现功能强大的RichText控件

转自：http://blog.csdn.net/ljxfblog/article/details/26136773

最近准备做一个聊天系统，开始准备使用cocos2dx的UIRichText控件来显示聊天内容，结果在使用的时候才发现，cocos2dx的RichText功能非常有限，完全不具备实现聊天的功能，只实现了加入文本、图像和自定义控件的功能，支持不同字体、颜色、字号。

我个人认为，一个RichText控件应该具备以下基本功能：

1、多样化的文本显示功能，包括字体、颜色、字号的设置。

2、能显示图片以及一些特殊元素。

3、应该支持图片文字的超链接功能。

4、能够支持滚动的效果。

5、能够有很方便的换行功能，最好能设置行间距。

如果能够更好的实现聊天的功能，我觉得还需要加入以下功能：

1、文本特效：描边，下划线，阴影，发光等功能。

2、支持设置控件最大显示行数。

3、支持数据的分类显示，用于分频道显示聊天内容。

cocos2dx只实现了基础的1和2功能，所以考虑之后还是决定自己写一个RichText控件。UIRichText的框架还是不错的，实现了文本分行显示的技术。在他的基础上很容易扩展。

首先，扩展RichItem，用来支持多样化的文本需求。

其次，扩展Label控件，用于支持特殊的文字效果。

再次，需要实现滚动功能，控件继承UIScrollView。

最后，还需要对lua进行支持，包括使用功能以及超链接点击事件的注册。

以上是我实现控件的思路，这里就不贴代码了，很多，我会把我的控件代码共享给大家，大家在使用中有什么问题也可以向我咨询。

源代码在这里，cocos2dx-3.0功能强大的richText控件

最后贴一下使用的代码和效果图吧！

使用代码如下，我是在lua里面使用的，大家可以参考一下：

[plain] view plaincopy

1. functionChatUI:initRichEdit()
2. localwidget=self:getWidget()
3. ifwidgetthen
4. --创建小喇叭控件
5. self._richBugle=ui.RichTextUI:create()
6. self._richBugle:setSize(cc.size(940,35))
7. self._richBugle:setAnchorPoint(cc.p(0,0))
8. self._richBugle:setPosition(cc.p(100,510))
9. self._richBugle:setMaxLine(1)
10. --创建聊天控件
11. self._richChat=ui.RichTextUI:create()
12. self._richChat:setSize(cc.size(940,420))
13. self._richChat:setAnchorPoint(cc.p(0,0))
14. self._richChat:setPosition(cc.p(20,70))
16. widget:addChild(self._richBugle)
17. widget:addChild(self._richChat)
19. localfunctioncallback(sender,eventType)
20. ifeventType==ui.RICHTEXT_ANCHOR_CLICKEDthen
21. print(">>>>>>>>>>>addEventListenerRichText")
22. end
23. end
24. self._richChat:addEventListenerRichText(callback)
25. end
26. end
28. functionChatUI:addChatMsg(channel,roleName,chatMsg,signs)
29. localrichText=(channel==Channel_ID_Bugle)andself._richBugleorself._richChat
30. ifrichTextandchannelandroleNameandchatMsgthen
31. localChannelNameSwitch=
32. {
33. [Channel_ID_Team]="【队伍】",
34. [Channel_ID_Privacy]="【私聊】",
35. [Channel_ID_Faction]="【帮会】",
36. [Channel_ID_World]="【世界】",
37. [Channel_ID_System]="【系统】"
38. }
39. localChannelColor=
40. {
41. [Channel_ID_Team]=Color3B.ORANGE,
42. [Channel_ID_Privacy]=Color3B.ORANGE,
43. [Channel_ID_Faction]=Color3B.ORANGE,
44. [Channel_ID_World]=Color3B.ORANGE,
45. [Channel_ID_System]=Color3B.WHITE,
46. [Channel_ID_Bugle]=Color3B.ORANGE
47. }
48. locallinkColor=Color3B.YELLOW
49. locallinklineColor=Color4B.YELLOW
50. localoutlineColor=Color4B.BLACK
52. ifchannel==Channel_ID_Buglethen
53. richText:insertNewLine()
54. end
55. ifChannelNameSwitch[channel]then
56. localrc=ui.RichItemText:create(channel,ChannelColor[channel],255,strg2u(ChannelNameSwitch[channel]),"DFYuanW7-GB2312.ttf",25)
57. rc:enableOutLine(outlineColor,2)
58. richText:insertElement(rc)
59. end
60. ifchannel~=Channel_ID_Systemthen
61. localrcn=ui.RichItemText:create(channel,linkColor,255,strg2u(roleName),"DFYuanW7-GB2312.ttf",25)
62. rcn:enableLinkLine(linklineColor,1)
63. rcn:enableOutLine(outlineColor,2)
64. richText:insertElement(rcn)
65. chatMsg=":"..chatMsg
66. end
67. localrcm=ui.RichItemText:create(channel,ChannelColor[channel],255,strg2u(chatMsg),"DFYuanW7-GB2312.ttf",25)
68. richText:insertElement(rcm)
69. ifchannel~=Channel_ID_Buglethen
70. richText:insertNewLine()
71. end
72. end
73. end
75. functionChatUI:initComponent()
76. self:addChatMsg(Channel_ID_Bugle,"王小二","ThisisBugleMsg")
77. self:addChatMsg(Channel_ID_System,"","ThisisSystemMsg")
78. self:addChatMsg(Channel_ID_Team,"王小二","ThisisTeamMsg")
79. self:addChatMsg(Channel_ID_World,"王小二","ThisisWorldMsg")
80. self:addChatMsg(Channel_ID_Faction,"王小二","ThisisFactionMsg")
82. self._channel=Channel_ID_World
83. self:showChannel(Channel_ID_All)
84. localbtnChannel=self:getChild("Button_Channel")
85. ifbtnChannelthen
86. btnChannel:setTitleText(strg2u("世界"))
87. end
88. end

最后是效果图：