Interaktive Textfelder mit Fabric.js

Ich vor kurzem eine mind-mapping-tool verwenden fabric.js und ich hatte das gleiche problem.

Zu erreichen, was Sie beschrieben haben (ändern Sie den text auf und nach der Erstellung von textuellen Elemente im canvas-Bereich), ich benutzte jquery um zu erkennen, das keydown-Ereignis. Vorausgesetzt, Sie haben die gewünschten textlichen element in das Gewebe Leinwand im folgenden Codeausschnitt wird, ändern Sie 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;
        }
    }
});

Verwendung dieser Technik, kann ich wählen Sie ein text-element in das Gewebe Leinwand, beginnen Sie mit der Eingabe und der text wird ersetzt. Man könnte es ändern, sodass es nicht löschen Sie den text jedes mal, wenn Sie wählen Sie das element aus.

Gibt es einige Kompromisse mit dieser Methode. Zum Beispiel können Sie nicht wählen Sie text aus, als ob es in eine normale HTML-input-text-element, und es gibt keine blinkenden cursor, also die "virtuellen" cursor immer am Ende des Textes.

Wenn Sie wirklich wollten könnten Sie zeichnen ein blinkender cursor am Ende des Textes.

InformationsquelleAutor der Antwort Tyson

Ich denke, es ist zu spät, aber vielleicht hilfreich für andere.

Es gibt eine demo auf fabricjs zu tun, die genau die gleiche Sache.

InformationsquelleAutor der Antwort pawan jain

Versuchen(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,
        });

InformationsquelleAutor der Antwort Kalvin Klien