cocos2dx扩展editBox实现可换行输入框

    游戏开发中，难免会遇到需要输入大量文字的输入框。而cocos2dx-lua自带的输入框EditBox无法实现换行输入，于是笔者就扩展了一下EditBox输入框，使其支持多行输入。

    为避免其他编程伙伴使用的不是cocos2dx或者cocos2dx-lua，笔者先说下设计思想，主要思路是：

一：创建一个支持换行显示的label，用于接收输入框的文字。（因为输入框自带的label不换行）

二：创建一个蒙版，这个蒙版用来遮住原本EditBox自带的label。（不然已经有个label，上面又创建了一个，岂非很尬）

三：事件绑定，在输入框的文字输入事件回调里，将自己创建的label显示为输入框的文字。

下面附上笔者源码：

--region *.lua
--css:2019-04-19
--CTEditBox:custom editbox（自定义编辑框，以支持多行编辑）
local CTEditBox = ccui.EditBox

function CTEditBox:initCT(size,bgUrl,fontSize)                        --size编辑框大小，bgUrl遮住编辑框原文字的背景图路径，fontSize文字大小
    bgUrl=bgUrl or "common_res/img_shirikuang.png"
    size=size or self:getParent():getContentSize()
    fontSize=fontSize or 28
    self:setContentSize(size)
    self:setAnchorPoint(cc.p(0.5,0.5))
    self:setPosition(cc.p(size.width/2,size.height/2))
    --创建蒙版，遮住原来不支持多行的编辑框文字显示
    local bgSize=ccui.ImageView:create(bgUrl):getContentSize()
    local maskSp = cc.Scale9Sprite:create(bgUrl,cc.rect(0,0,bgSize.width,bgSize.height))
    if not maskSp then
        return
    end
    --maskSp:setTouchEnabled(false)
    maskSp:setOpacity(255)
	maskSp:setPosition(cc.p(size.width/2,size.height/2))
	maskSp:addTo(self)

    --九宫格适配大小，使蒙版刚好只遮住编辑框
    maskSp:setContentSize(size)
    --创建用于显示默认文字的label
    --默认显示文字
    local paddingX=0.95
    local paddingY=0.9
    self.msg=self:getPlaceHolder() or ""
    self.defaultLabel = cc.Label:createWithTTF(self.msg,"fonts/round_body.ttf",fontSize)
    :setColor(cc.c3b(94, 87, 87))
    :setDimensions(size.width*paddingX,size.height*paddingY)
    :setAnchorPoint(0,1)
	:move((1-paddingX)*size.width/2, size.height*paddingY)
	:addTo(self:getParent())
    --创建用于显示文字的label
    --默认显示文字
    self.label = cc.Label:createWithTTF("", "fonts/round_body.ttf", fontSize)
    :setDimensions(size.width*paddingX,size.height*paddingY)
    :setAnchorPoint(0,1)
	:move((1-paddingX)*size.width/2, size.height*paddingY)
	:addTo(self:getParent())

    --注册监听
    local editHanlder = function(event,editbox)
		self:onEditEvent(event,editbox)
	end
    self:registerScriptEditBoxHandler(editHanlder)

    --最小化原来文字，最小单位是1，若想设置显示文字属性，请调用getLabel去设置
    self:setFontSize(1)
    self:setPlaceholderFontSize(1)
    return self
end

function CTEditBox:setCTText(str)
    self.label:setString(str)
end


function CTEditBox:onEditEvent(event,editbox)
    if event == "return" then
        if self.label:getString() == "" then
            self.defaultLabel:setVisible(true)
        end
    elseif event == "changed" then
        local str=editbox:getText()
        self.defaultLabel:setVisible(false)
        self.label:setString(str)
	end
end

function CTEditBox:getLabel()
    return self.label
end

return CTEditBox
--endregion

调用例子，部分参数为笔者项目特有，如data。仅供参考，试图运行时请自行修改参数：

    local CTEditBox = appdf.req("base.src.app.views.layer.other.CTEditBox")  
    self.holderMsg="认真评价有机会获得0.1元~10元的奖励金哦（需在支付成功的24小时内评价），快说出闪付专员的优点和美中不足的地方吧~"
    if data.IsEvaluate==1 then
        percent=(data.Evaluate/50)*100                                                                    --评价分数
        self.holderMsg=""                                                               --评价内容
    end
    self.evSlider:setPercent(percent)
    self.evSlider:setEnabled(data.IsEvaluate==0)
    self.evEdit = CTEditBox:create(size,"")
            :setMaxLength(100)
            :setPlaceHolder(self.holderMsg)
            :addTo(evEditBg)
    self.evEdit:initCT()
    self.evEdit:setCTText(data.EvaluateContent)
    self.evEdit:setEnabled(data.IsEvaluate~=1)

PC上的运行效果：

笔者此时的cocos2dx引擎为3.0，若读者版本不同，可能editBox的背景图不能传""，另外用来覆盖原编辑框的mask层级也需要做些调整。