cocos2dx实现功能强大的RichText控件

最近准备做一个聊天系统，开始准备使用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 plain copy

1. function ChatUI:initRichEdit()      
2.     local widget = self:getWidget()  
3.     if widget then  
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))    
15.   
16.         widget:addChild(self._richBugle)  
17.         widget:addChild(self._richChat)  
18.   
19.         local function callback(sender, eventType)  
20.             if eventType == ui.RICHTEXT_ANCHOR_CLICKED then  
21.                 print(">>>>>>>>>>>addEventListenerRichText")  
22.             end  
23.         end  
24.         self._richChat:addEventListenerRichText(callback)  
25.     end   
26. end  
27.   
28. function ChatUI:addChatMsg(channel, roleName, chatMsg, signs)  
29.     local richText = (channel == Channel_ID_Bugle) and self._richBugle or self._richChat  
30.     if richText and channel and roleName and chatMsg then  
31.         local ChannelNameSwitch =   
32.         {  
33.             [Channel_ID_Team] = "【队伍】",  
34.             [Channel_ID_Privacy] = "【私聊】",  
35.             [Channel_ID_Faction] = "【帮会】",  
36.             [Channel_ID_World] = "【世界】",  
37.             [Channel_ID_System] = "【系统】"  
38.         }  
39.         local ChannelColor =   
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.         local linkColor = Color3B.YELLOW  
49.         local linklineColor = Color4B.YELLOW     
50.         local outlineColor = Color4B.BLACK    
51.   
52.         if channel == Channel_ID_Bugle then  
53.             richText:insertNewLine()  
54.         end  
55.         if ChannelNameSwitch[channel] then  
56.             local rc = 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.         if channel ~= Channel_ID_System then  
61.             local rcn = 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.         local rcm = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(chatMsg), "DFYuanW7-GB2312.ttf", 25)    
68.         richText:insertElement(rcm)  
69.         if channel ~= Channel_ID_Bugle then  
70.             richText:insertNewLine()  
71.         end  
72.     end  
73. end  
74.   
75. function ChatUI:initComponent()     
76.     self:addChatMsg(Channel_ID_Bugle, "王小二", "This is Bugle Msg")  
77.     self:addChatMsg(Channel_ID_System, "", "This is System Msg")  
78.     self:addChatMsg(Channel_ID_Team, "王小二", "This is Team Msg")  
79.     self:addChatMsg(Channel_ID_World, "王小二", "This is World Msg")  
80.     self:addChatMsg(Channel_ID_Faction, "王小二", "This is Faction Msg")  
81.   
82.     self._channel = Channel_ID_World  
83.     self:showChannel(Channel_ID_All)  
84.     local btnChannel = self:getChild("Button_Channel")  
85.     if btnChannel then  
86.         btnChannel:setTitleText(strg2u("世界"))  
87.     end      
88. end  

        最后是效果图：

本文摘自：http://blog.csdn.net/ljxfblog/article/details/26136773