Interactive champs de texte avec Fabric.js
J'ai joué avec Fabric.js beaucoup de choses dans le dernier quelques semaines, mais en ce qui concerne les champs de texte j'ai trouvé qu'il est possible de définir le texte sur la création.
Est-il possible de faire un interactive champ de texte, ou dois-je trouver une solution de contournement pour réaliser cela? (Interactive champ de texte, je veux dire une zone de la toile, je peux cliquer sur et à écrire directement dedans.)
- qu'entendez-vous par interactive champ de texte?
- Il signifie ajouter du texte sur la toile et modifier du contenu plus tard.
- Exactement ce que Marcel a dit
- Quel est le protocole ici quand une réponse est à jour? Créer une nouvelle question, une réponse, et lien à cette question à partir de la question d'origine? Fondamentalement accepté la réponse est plus correcte et la réponse ci-dessous c'est la bonne réponse pour les personnes à la recherche d'une solution.
- vous pouvez simplement mettre un commentaire à la question (comme vous l'avez fait) et en informer l'auteur qu'il n'y a plus up-to-date de la réponse. La modification de la accepté de répondre, c'est juste un clic 🙂
Vous devez vous connecter pour publier un commentaire.
La dernière version de fabric.js inclut une classe de la bibliothèque IText qui intègre l'interaction pour l'édition et la sélection de texte de façon dynamique. essayez le code ci-dessous avec la dernière version de fabric.js
function is undefined
-comme des erreurs. J'ai modifié mon script de la source au point à la can,http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js
au lieu de mon propre copie locale et qui a résolu mon problème. Je ne sais pas encore pourquoi IText n'est pas dans la coutume de construire si.J'ai récemment construit un outil à l'aide de mind mapping fabric.js et j'ai rencontré le même problème.
Pour atteindre ce que vous avez décrit (en changeant le texte et après la création des éléments textuels dans la toile), j'ai utilisé jquery pour détecter l'événement keydown. En supposant que vous avez sélectionné l'élément de texte dans le tissu de la toile l'extrait de code suivant va changer le texte.
À l'aide de cette technique, je peux sélectionner un élément de texte dans le tissu de toile, commencez à taper le texte est remplacé. Vous pouvez le changer si il n'a pas effacer le texte chaque fois que vous sélectionnez l'élément.
Il y a quelques compromis avec cette méthode. Par exemple, vous ne pouvez pas sélectionner le texte comme si elle était dans un HTML ordinaire d'entrée de l'élément de texte et il n'y a pas de curseur qui clignote, donc le "virtuel" curseur est toujours à la fin du texte.
Si vous avez vraiment envie de vous pouvez dessiner un curseur qui clignote à la fin du texte.
Que c'était ce que je cherchais 🙂 Merci beaucoup!
Je suppose que c'est trop tard, mais c'est peut-être de l'aide aux autres.
Il y a une démo sur fabricjs de faire exactement la même chose.
en supposant que vous avez à la fois la toile et le contexte comme des variables dans votre script:
Essayez ceci(c'est à partir de mon application):