首頁  >  文章  >  資料庫  >  cocos2dx实现功能强大的RichText控件

cocos2dx实现功能强大的RichText控件

WBOY
WBOY原創
2016-06-07 15:19:191387瀏覽

最近准备做一个聊天系统,开始准备使用cocos2dx的UIRichText控件来显示聊天内容,结果在使用的时候才发现,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 plaincopycocos2dx实现功能强大的RichText控件cocos2dx实现功能强大的RichText控件

  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  

        最后是效果图:

cocos2dx实现功能强大的RichText控件

         

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn