Implement Multi-line Input in cocos2d-x input box

Disclaimer: this blog is an original blog. For more information, see http://blog.csdn.net/chengyingzhilian/article/details/41060735. it is related to the design.

On how to achieve multi-line input, it seems that the cocos2d-x has not been resolved, why the UI has such a defect. Shouldn't it be. The basic idea of online search is to integrate textfieldttf and then rewrite the key algorithms. Compared with this regular army, the following design ideas can be tricky.

The editbox is a single row input. Although multiple lines of words appear in API wiki. Secondly, labelttf supports multi-row display. So. The clever method is implemented using the editbox + labelttf combination. The general design concept is to use label to display editbox content in real time.

Let's take a look at the design diagram first.

The Green Box indicates the screen. You cannot see any other content.

The purple box indicates the input area. Here, a label is added to display the input content.

The red area is editbox, and the left side is longer than the screen. There are two reasons:

1. Make sure that the input method is displayed when you click the input box. This means that the editbox control is required for the input box.

2. The editbox should be as far away as possible from the recognizable area on the screen, so that the single line of input content cannot be displayed in the editbox. The editbox is monitored in real time and updated to labelttf.

The gray area is an event mask. Avoid clicking the outside of the input box to bring up the input box.

Implementation:

After understanding the concept, the code implementation is much simpler. For the implementation code, see this blog.

Here. Use the Lua script.

<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>

You can use registerscripteditboxhandler to implement the listener. Note that unregisterscripteditboxhandler is required when exiting.

Note that there is no cursor in the input box.

If you study some cocos2d-x-based games, you'll find that on the multi-line Input Interface, some do not have a cursor. For example, does Kunlun's Q Chuan of martial arts achieve this.