zoukankan      html  css  js  c++  java
  • 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里面使用的,大家可以参考一下:     

    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  

            最后是效果图:

             

  • 相关阅读:
    基本技能训练之线程
    关于UEditor的使用配置(图片上传配置)
    PAT 乙级练习题1002. 写出这个数 (20)
    codeforces 682C Alyona and the Tree DFS
    codeforces 681D Gifts by the List dfs+构造
    codeforces 678E Another Sith Tournament 概率dp
    codeforces 680E Bear and Square Grid 巧妙暴力
    codeforces 678D Iterated Linear Function 矩阵快速幂
    codeforces 679A Bear and Prime 100 交互
    XTUOJ 1248 TC or CF 搜索
  • 原文地址:https://www.cnblogs.com/shiweihappy/p/4246443.html
Copyright © 2011-2022 走看看