取巧實現cocos2d-x輸入框的多行輸入

標籤：style   blog   http   color   使用   os   io   strong   

   聲明：本部落格為原創部落格，轉載請註明，原文地址為http://blog.csdn.net/chengyingzhilian/article/details/38660735關於設計

關於如何?多行輸入，貌似cocos2d-x 一直沒有解決，為啥UI會有如此缺陷呢。不該不該啊。網上搜尋的基本的實現思路是：整合TextFieldTTF,然後重寫關鍵演算法。相對於這種正規軍來說，下面的設計思路就算是取巧吧。

首先說明一下，EditBox是單行輸入。雖然API wiki中出現多行的字眼。其次，LabelTTF是支援多行顯示的。所以呢。取巧的方式正式採用EditBox+LabelTTF組合實現的。大體的設計思路呢，就是用Label 即時顯示EditBox 的內容。

先看下設計圖吧。

說明一下，綠色的框呢，表示螢幕介面，就這麼大。多了看不到其他內容。

紫色的框呢表示輸入地區，在此添加一個Label,用於顯示輸入的內容。

紅色的地區是EditBox，左側之所以要比螢幕長呢。原因有兩點：

1 必須保證點擊輸入框位置能彈出IME。這也就是輸入框位置要有editBox 控制項。

2.EditBox 要距離螢幕可識地區盡量的遠，這樣輸入的單行內容就無法顯示在EditBox中，而即時監聽EditBox，一旦有變化更新到LabelTTF上。

灰色地區是一個事件遮罩。避免點擊輸入框外面而彈出輸入框。

關於實現：

明白思路了，代碼實現起來就簡單多了。實現代碼見本部落格。

在此呢。使用Lua 指令碼實現。

<span style="font-family:KaiTi_GB2312;">function multLineInput:init()    local Spritecache = cc.SpriteFrameCache:getInstance()    local frame = Spritecache:getSpriteFrame("touming.png")    local codeBg1 = cc.Scale9Sprite:createWithSpriteFrame(frame)    local size = self.contentNode:getContentSize()        local boxSize = cc.size(size.width,size.height)    self.editBox = cc.EditBox:create(boxSize,codeBg1)    self.editBox:setAnchorPoint(cc.p(0.0,0.0))    self.editBox:setFontSize(0)    self.editBox:setMaxLength(330)    self.editBox:setOpacity(0)    self.contentNode:addChild(self.editBox)local handler = function(event)    if event == "began" then        self.editBox:setText( self.contentLabel:getString())    end        if event == "changed" then        local str =  self.editBox:getText()        self.contentLabel:setString(str)    end        if event == "return" then       local str =  self.editBox:getText()       self.editBox:setText("")       self.contentLabel:setString(str)    endend    self.editBox:registerScriptEditBoxHandler(handler)end</span>

對於監聽可使用registerScriptEditBoxHandler 來實現。注意在退出的時候，需要unregisterScriptEditBoxHandler。

不過有一點需要注意，輸入框是沒有游標的。

如果研究一些cocos2d-x 做的遊戲，你用發現在多行輸入的介面，有些也是沒有游標的。比如 崑崙的《武俠Q傳》也是這樣實現的嗎。