cocos2dx实现功能强大的RichText控件

最新推荐文章于 2023-08-04 14:52:18 发布

转载最新推荐文章于 2023-08-04 14:52:18 发布 · 699 阅读

作者在cocos2dx框架下扩展RichText控件，解决其功能限制，以实现更丰富的聊天系统显示效果，包括多样化文本显示、图片文字超链接、滚动效果及方便的换行功能等。

cocos2dx实现功能强大的RichText控件

2014-05-19 我来说两句来源：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里面使用的，大家可以参考一下：

 
          function ChatUI:initRichEdit()    
         
          local widget = self:getWidget()
         
          if 
           widget then
         
          --创建小喇叭控件
         
          self._richBugle = ui.RichTextUI:create()
         
          self._richBugle:setSize(cc.size(
          940
          , 
          35
          ))
         
          self._richBugle:setAnchorPoint(cc.p(
          0
          , 
          0
          ))
         
          self._richBugle:setPosition(cc.p(
          100
          , 
          510
          ))
         
          self._richBugle:setMaxLine(
          1
          )
         
          --创建聊天控件
         
          self._richChat= ui.RichTextUI:create()
         
          self._richChat:setSize(cc.size(
          940
          , 
          420
          ))
         
          self._richChat:setAnchorPoint(cc.p(
          0
          , 
          0
          ))
         
          self._richChat:setPosition(cc.p(
          20
          , 
          70
          ))  
         
          widget:addChild(self._richBugle)
         
          widget:addChild(self._richChat)
         
          local function callback(sender, eventType)
         
          if 
           eventType == ui.RICHTEXT_ANCHOR_CLICKED then
         
          print(
          ">>>>>>>>>>>addEventListenerRichText"
          )
         
          end
         
          end
         
          self._richChat:addEventListenerRichText(callback)
         
          end 
         
          end
         
          function ChatUI:addChatMsg(channel, roleName, chatMsg, signs)
         
          local richText = (channel == Channel_ID_Bugle) and self._richBugle or self._richChat
         
          if 
           richText and channel and roleName and chatMsg then
         
          local ChannelNameSwitch = 
         
          {
         
          [Channel_ID_Team] = 
          "【队伍】"
          ,
         
          [Channel_ID_Privacy] = 
          "【私聊】"
          ,
         
          [Channel_ID_Faction] = 
          "【帮会】"
          ,
         
          [Channel_ID_World] = 
          "【世界】"
          ,
         
          [Channel_ID_System] = 
          "【系统】"
         
          }
         
          local ChannelColor = 
         
          {
         
          [Channel_ID_Team] = Color3B.ORANGE,
         
          [Channel_ID_Privacy] = Color3B.ORANGE,
         
          [Channel_ID_Faction] = Color3B.ORANGE,
         
          [Channel_ID_World] = Color3B.ORANGE,
         
          [Channel_ID_System] = Color3B.WHITE,
         
          [Channel_ID_Bugle] = Color3B.ORANGE
         
          }
         
          local linkColor = Color3B.YELLOW
         
          local linklineColor = Color4B.YELLOW   
         
          local outlineColor = Color4B.BLACK  
         
          if 
           channel == Channel_ID_Bugle then
         
          richText:insertNewLine()
         
          end
         
          if 
           ChannelNameSwitch[channel] then
         
          local rc = ui.RichItemText:create(channel, ChannelColor[channel], 
          255
          , strg2u(ChannelNameSwitch[channel]), 
          "DFYuanW7-GB2312.ttf"
          , 
          25
          )    
         
          rc:enableOutLine(outlineColor, 
          2
          )
         
          richText:insertElement(rc)
         
          end
         
          if 
           channel ~= Channel_ID_System then
         
          local rcn = ui.RichItemText:create(channel, linkColor, 
          255
          , strg2u(roleName), 
          "DFYuanW7-GB2312.ttf"
          , 
          25
          )  
         
          rcn:enableLinkLine(linklineColor, 
          1
          )
         
          rcn:enableOutLine(outlineColor, 
          2
          )
         
          richText:insertElement(rcn)
         
          chatMsg = 
          ":" 
           .. chatMsg
         
          end
         
          local rcm = ui.RichItemText:create(channel, ChannelColor[channel], 
          255
          , strg2u(chatMsg), 
          "DFYuanW7-GB2312.ttf"
          , 
          25
          )  
         
          richText:insertElement(rcm)
         
          if 
           channel ~= Channel_ID_Bugle then
         
          richText:insertNewLine()
         
          end
         
          end
         
          end
         
          function ChatUI:initComponent()   
         
          self:addChatMsg(Channel_ID_Bugle, 
          "王小二"
          , 
          "This is Bugle Msg"
          )
         
          self:addChatMsg(Channel_ID_System, 
          ""
          , 
          "This is System Msg"
          )
         
          self:addChatMsg(Channel_ID_Team, 
          "王小二"
          , 
          "This is Team Msg"
          )
         
          self:addChatMsg(Channel_ID_World, 
          "王小二"
          , 
          "This is World Msg"
          )
         
          self:addChatMsg(Channel_ID_Faction, 
          "王小二"
          , 
          "This is Faction Msg"
          )
         
          self._channel = Channel_ID_World
         
          self:showChannel(Channel_ID_All)
         
          local btnChannel = self:getChild(
          "Button_Channel"
          )
         
          if 
           btnChannel then
         
          btnChannel:setTitleText(strg2u(
          "世界"
          ))
         
          end    
         
          end