Interaktive Textfelder mit Fabric.js

Ich habe in den letzten Wochen viel mit Fabric.js herumgespielt, aber bei Textfeldern habe ich festgestellt, dass es nur möglich ist, den Text bei der Erstellung festzulegen.

Gibt es eine Möglichkeit, ein interaktives Textfeld zu erstellen, oder muss ich eine Problemumgehung finden, um dies zu erreichen? (Mit interaktivem Textfeld meine ich einen Bereich der Leinwand, auf den ich klicken und direkt hineinschreiben kann.)

Die neueste Version von fabric.js enthält eine Klasse IText, die die Interaktion zum Bearbeiten und Auswählen von Text dynamisch enthält. Probieren Sie den folgenden Code mit der neuesten Version von fabric.js aus

canvas.add(new fabric.IText('Tap and Type', { 
  fontFamily: 'arial black',
  left: 100, 
  top: 100 ,
}));

Ich habe kürzlich ein Mind-Mapping-Tool mit fabric.js erstellt und bin auf dasselbe Problem gestoßen.

Um das zu erreichen, was Sie beschrieben haben (Ändern des Textes bei und nach der Erstellung von Textelementen in der Leinwand), habe ich jquery verwendet, um das Keydown-Ereignis zu erkennen. Angenommen, Sie haben das gewünschte Textelement in der Stoffleinwand ausgewählt, ändert der folgende Ausschnitt den Text.

$(document).keydown(function(e){
    var keyPressed = String.fromCharCode(e.which);
    var text = canvas.getActiveObject();
    if (text)
    {
        var newText="";
        var stillTyping = true;
        if (e.which == 27) //esc
        {
            if (!text.originalText) return; //if there is no original text, there is nothing to undo
            newText = text.originalText;
            stillTyping = false;
        }
        //if the user wants to make a correction
        else
        {
            //Store the original text before beginning to type
            if (!text.originalText)
            {
                text.originalText = text.text;
            }
            //if the user wants to remove all text, or the element entirely
            if (e.which == 46) //delete
            {
                activeObject.element.remove(true);
                return;
            }
            else if (e.which == 16) { //shift
                newText = text.text;
            }
            else if (e.which == 8) //backspace
            {
                e.preventDefault();
                newText = text.text.substr(0, text.text.length - 1);
            }
            else if (e.which == 13) //enter
            {
                //canvas clear selection
                canvas.discardActiveObject();
                canvas.renderAll();
                canvasBeforeSelectionCleared({ memo: { target: text} });

                newText = text.text;
                stillTyping = false;
            }
            //if the user is typing alphanumeric characters
            else if (
                (e.which > 64 && e.which < 91) || //A-Z
                (e.which > 47 && e.which < 58) || //0-9
                (e.which == 32) || //Space
                (keyPressed.match(/[!&()"'?-]/)) //Accepted special characters
            )
            {
                if (text.text == text.originalText) text.text="";
                if (keyPressed.match(/[A-Z]/) && !e.shiftKey)
                    keyPressed = keyPressed.toLowerCase();
                newText = text.text + keyPressed;
            }
        }
        text.set({ text: newText }); //Change the text
        canvas.renderAll(); //Update the canvas

        if (!stillTyping)
        {
            this.text.originalText = null;
        }
    }
});

Mit dieser Technik kann ich ein Textelement auf der Stoffleinwand auswählen, mit der Eingabe beginnen und der Text wird ersetzt. Sie können es ändern, damit der Text nicht jedes Mal gelöscht wird, wenn Sie das Element auswählen.

Bei dieser Methode gibt es einige Kompromisse. Beispielsweise können Sie Text nicht wie in einem normalen HTML-Eingabetextelement auswählen und es gibt keinen blinkenden Cursor, daher befindet sich der “virtuelle” Cursor immer am Ende des Textes.

Wenn Sie wirklich wollten, könnten Sie am Ende des Textes einen blinkenden Cursor zeichnen.

Ich denke, es ist zu spät, aber vielleicht hilft es anderen.

Es gibt eine Demo auf fabricjs, um genau dasselbe zu tun.

    text.set({ text: newText }); //Change the text
    canvas.renderAll(); //Update the canvas

Das war, wonach ich gesucht habe 🙂 Vielen Dank!

Angenommen, Sie haben sowohl die Leinwand als auch den Kontext als Variablen in Ihrem Skript:

// write text
context.fillText("text1",0,0);


// refresh canvas and write new text
context.clearRect(0,0,canvas.width,canvas.height);
context.fillText("text2",0,0);

Versuchen Sie dies (dies ist aus meiner Anwendung):

Text Color: <input id="text-color" type="text" value = "#FF0000" name="textColor" />


textColor.onchange = function() {
            canvas.getActiveObject().setColor(this.value);
            canvas.renderAll();
        };

function updateControls() {         
            textControl.value = canvas.getActiveObject().getText();
        }

        canvas.on({
            'object:selected': updateControls,
        });