最近準備作一個聊天系統,開始準備使用cocos2dx的UIRichText控制顯示屏聊天,在使用中發現的結果,cocos2dx的RichText頗有限。全然不具有實現聊天的功能。僅僅實現了增長文本、圖像和本身定義控件的功能。支持不一樣字體、顏色、字號。框架
我我的以爲。一個RichText控件應該具有下面基本功能:字體
一、多樣化的文本顯示功能,包含字體、顏色、字號的設置。ui
二、能顯示圖片以及一些特殊元素。lua
三、應該支持圖片文字的超連接功能。spa
四、能夠支持滾動的效果。.net
五、能夠有很是方便的換行功能,最好能設置行間距。code
假設能夠更好的實現聊天的功能。我認爲還需要增長下面功能:blog
一、文本特效:描邊。下劃線,陰影,發光等功能。繼承
二、支持設置控件最大顯示行數。事件
三、支持數據的分類顯示,用於分頻道顯示聊天內容。
cocos2dx僅僅實現了基礎的1和2功能,因此考慮以後仍是決定本身寫一個RichText控件。UIRichText的框架仍是不錯的,實現了文本分行顯示的技術。在他的基礎上很是easy擴展。
首先,擴展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
最後是效果圖: