I Ich habe kürzlich ein Mind-Mapping-Tool mit fabric.js erstellt, und ich stieß auf das gleiche Problem.
Um das zu erreichen, was Sie beschrieben haben (den Text beim und nach der Erstellung von Textelementen im Canvas ändern), verwendete ich jquery, um das Keydown-Ereignis zu erkennen. Angenommen, Sie haben das gewünschte Textelement in der Fabric-Zeichenfläche ausgewählt, wird das folgende Snippet den Text ändern.
$(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 in das Gewebe Leinwand wählen, beginnen die Eingabe und der Text ersetzt wird. Sie können es ändern, damit es den Text nicht jedes Mal löscht, wenn Sie das Element auswählen.
Es gibt einige Kompromisse mit dieser Methode. 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 einen blinkenden Cursor am Ende des Textes zeichnen.
was meinst du mit interaktivem Textfeld? – hjpotter92
@TheJumpingFrog: Er bedeutet, Text auf der Leinwand hinzuzufügen und den Inhalt später zu bearbeiten. – Marcel
Genau das, was Marcel sagte – Kappei