Cocos2dx gibt mehrzeiligen Text ein und zeigt ihn an

Cocos2dx gibt mehrzeiligen Text ein und zeigt ihn an

Verwenden Sie die integrierten Eingabefeldereignisse ccui.Textund und , um die Eingabe und Anzeige von mehrzeiligem Text abzuschließen.cc.EditBoxeditBoxTextChanged

Schauen wir uns zuerst das Rendering an:

Schauen wir uns die aktuellen Nachteile cc.LabelTTFdes Originals an: 1. Kann die Schriftart nicht ändern, 2. Es gibt ein zusätzliches Leerzeichen am Ende der neuen Zeile, wenn Chinesisch und Zahlen verbunden sind , siehe das Vergleichsbild unten. Abbildung 1. ↓ Abbildung 2. Ich habe es selbst geschrieben↓ Wenn man Abbildung 1 und Abbildung 2 vergleicht, ist es nicht schwer zu erkennen, dass hinter der ersten Zeile in Abbildung 1 eine große Lücke ist und mindestens zwei weitere 2 eingefügt werden können, aber es ist Die Zeile wurde geändert, und ich kann seinen Schriftstil nicht ändern (ich habe es verwendet, ohne es erfolgreich zu ändern). Betrachten wir meine Schreibmethode wie in Abbildung 2. Erstens habe ich die Schriftart geändert, die mir gefällt, und zweitens kann ich eine Zeile füllen und dann umbrechen. Es gibt keine offensichtliche Lücke, was eher den tatsächlichen Entwicklungsanforderungen entspricht .setDimensions
cc.LabelTTFsetDimensions



cc.LabelTTFsetDimensionssetFontName

Wenn Sie nur einen seidigen automatischen Zeilenumbruch benötigen, kopieren Sie einfach die mittlere setMyMultiContentSumme setMyMultiLineText.
Sie alle summieren sich zu einer mehrzeiligen Eingabebox.

//输入框
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);
        }

    },

Nun, das Obige ist der gesamte Code.
Das vom Autor geschriebene mehrzeilige Texteingabefeld ist für ein kleines Eingabefeld. Sie können sehen, dass ich die maximale Länge des Eingabefelds auf 100 Zeichen begrenzt habe. Bei weniger Zeichen gibt es keine Performance-Probleme, aber es wird angezeigt wenn die Anzahl der Zeichen lang ist Offensichtliche Verzögerung , da jede Eingabe jedes Mal neu generiert und neu berechnet wird , je mehr Wörter es gibt , desto fester wird es . Dies ist jedoch nicht ohne Lösung.Ändernvar myLabel Sie das Original, um jedethis["myLabel"+this.textLine] Textzeile dynamisch durch die Anzahl der Zeilen zu generieren, und aktualisieren Sie dann die aktuelle Textzeile, um die Berechnungen jeder Zeile unabhängig voneinander zu machen.Solange die Anzahl von Wörtern in einer Zeile nicht zu lang ist, wird es nicht Es gibt ein Leistungsproblem. ^ ^ ps Zur Ergänzung, dass der so simulierte mehrzeilige Eingabetext keinen blinkenden Cursor hat , weil der Text dahinter tatsächlich angezeigt wird.