cocos2dx输入多行文本及展示
使用ccui.Text和cc.EditBox以及内置输入框事件editBoxTextChanged完成多行文本的输入与展示。
先上效果图：
先来看看原本的cc.LabelTTF的setDimensions目前存在的弊端：1.无法换字体; 2.中文和数字相接时换行末尾有多余空隙，见下方对比图。
图1.cc.LabelTTF的setDimensions ↓
图2.我自己写的 ↓
对比图1和图2不难看出用cc.LabelTTF的setDimensions的图1在第一行后方存在较大的空隙至少还能再塞进两个2，但是它却换行了，并且我无法更换他的字体样式(我用的是setFontName没有更改成功)。
再来看我写的方法如图2，首先是换了个我喜欢的字体，其次是能够填满一行之后再换行，不存在明显的空隙，更符合实际开发需求。
如果你只需要丝滑的自动换行那复制中间的setMyMultiContent和setMyMultiLineText就可以了。
全部加起来的话是实现多行输入框。
//输入框
var editboxArea = new cc.Sprite("#"+myBackground);
var myEditBox = new cc.EditBox(cc.size(725, 349), editboxArea);
myEditBox.x = 260;
myEditBox.y = 330;
myEditBox.setAnchorPoint(0,0.5);
myEditBox.setPlaceHolder("请输入内容");
myEditBox.setDelegate(this);
myEditBox.setFontColor(cc.color(0,0,0,0));//这里隐藏掉原本输入框的文字内容，正常显示的话去掉最后一个,0
myEditBox.setFontSize(38);
myEditBox.setInputMode(cc.EDITBOX_INPUT_MODE_ANY);
myEditBox.setPlaceholderFontSize(38);
myEditBox.setMaxLength(100);
myEditBox.setName("myEditBox")
this.popupBg.addChild(myEditBox,2);
this.setMyMultiContent("");//初始化显示新的输入框内容
setMyMultiContent:function(str){
//创建多行文本的父容器 以便后续统一移除添加
if(cc.sys.isObjectValid(this.multiContent)){
this.multiContent.removeFromParent();
this.textLine = 0;
}
this.multiContent = new cc.Sprite();
this.multiContent.setAnchorPoint(0,1);
this.multiContent.x = 280;
this.multiContent.y = 480;
this.popupBg.addChild(this.multiContent,2);
this.setMyMultiLineText(str);
},
setMyMultiLineText :function(str){
//Simulates multi-line text 模拟的多行文本
//(cc.LabelTTF的setDimensions有弊端1.无法换字体;2.中文和数字相接时换行末尾有多余空隙)
var myLabel = new ccui.Text("", myFont, 36);//字体自行修改
myLabel.setColor(cc.color(125,103,82));
myLabel.setAnchorPoint(0,1);
myLabel.x = 0;
myLabel.y = - this.textLine * 42;
this.multiContent.addChild(myLabel, 6);
// var str = "11111111112222222222";
var strArr = [];
var backStr = "";
//分解字符串逐个添加逐个计算宽度 超出指定宽后进行换行
for(var i = 0 ; i < str.length ; i ++){
strArr.push(str[i]);
backStr = strArr.join("");
myLabel.setString(backStr);
if(myLabel.width > 675){
console.log(i,"超了");
this.textLine ++;
// arguments.callee(str.slice(i+1));//自我调用这样写比较优雅但性能较差
this.setMyMultiLineText(str.slice(i+1));//超出的部分递归
break;
}else{
if(i >= str.length - 1){
console.log(i,"结束了 没超");
return;
}else{
console.log(i,"没结束 继续");
}
}
}
},
//内置编辑框输入改变监听事件 在每次发生改变时都去重新生成多行文本
editBoxTextChanged: function (editBox, text) {
cc.log("editBox " + editBox.name + ", TextChanged, text: " + text);
if(editBox.name == "myEditBox"){
console.log("多行");
this.setMyMultiContent(text);
}
},
好了以上就是全部代码。
笔者写的这个多行文本输入框是面对小型输入框的，可以看到我在输入框最大长度限制了100个字，较少的字不会有性能问题，但是当字数长了就会出现明显的卡顿，因为到后面每次输入都会全部重新生成重新计算一遍，所以字越多就会越卡。但这不是没有解决办法的，把原本的var myLabel改成this["myLabel"+this.textLine]通过行数动态的生成每一行文字，后续去更新当前行文字就可以做到每一行的计算相互独立，只要一行的字数不是过长就不会有性能问题了。^ ^
ps补充一点这样模拟出来的多行输入文本是没有光标闪烁的哦,因为后面其实显示的是单纯的文本。