cocos2dx對於強大的RichText控制

      最近准備做一個聊天系統，開始准備使用cocos2dx的UIRichText控制顯示屏聊天，在使用中發現的結果，cocos2dx的RichText很有限。全然不具備實現聊天的功能。僅僅實現了增加文本、圖像和自己定義控件的功能。支持不同字體、顏色、字號。

      我個人覺得。一個RichText控件應該具備下面基本功能：

      1、多樣化的文本顯示功能，包含字體、顏色、字號的設置。

      2、能顯示圖片以及一些特殊元素。

      3、應該支持圖片文字的超鏈接功能。

      4、可以支持滾動的效果。

      5、可以有非常方便的換行功能，最好能設置行間距。

      假設可以更好的實現聊天的功能。我認為還須要增加下面功能：

      1、文本特效：描邊。下划線，陰影，發光等功能。

      2、支持設置控件最大顯示行數。

      3、支持數據的分類顯示，用於分頻道顯示聊天內容。

      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

        最后是效果圖：

         

版權聲明：本文博客原創文章。博客，未經同意，不得轉載。