Cocos2dx 入力の複数行テキストと表示
ccui.Textおよびcc.EditBox組み込みの入力ボックス イベントを使用してeditBoxTextChanged、複数行のテキストの入力と表示を完了します。
まずレンダリングを見てみましょう:オリジナルの現在の欠点
を見てみましょう: 1.フォントを変更できない2.中国語と数字を接続すると、改行の末尾に余分なスペースがある、下の比較写真を参照してください。図 1. ↓図 2. 自分で書いたもの↓図 1 と図 2 を比較すると、図 1 の最初の行の後ろに大きなギャップがあることがわかり、少なくともあと 2 つ 2 を挿入できますが、線が変更され、フォントスタイルを変更できません（うまく変更せずに使用しました）。図 2 に示すように、私の書き方を見てみましょう. まず、好きなフォントを変更し、次に、行を塗りつぶしてから折り返すことができます. 明らかなギャップはありません , これは実際の開発ニーズに沿っています.cc.LabelTTFsetDimensionscc.LabelTTFsetDimensions
cc.LabelTTFsetDimensionssetFontName
滑らかな自動行折り返しだけが必要な場合は、中間のsetMyMultiContentsumをコピーするだけです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このようにシミュレートされた複数行の入力テキストには、実際にはその背後にあるテキストが表示されるため、カーソルの点滅はありません。