cocos2dx实现功能强大的RichText控件

时间：2021-12-13 15:45:23

转自：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里面使用的，大家可以参考一下：

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

最后是效果图：

cocos2dx实现功能强大的RichText控件

相关文章