Maison > Article > interface Web > Comment quitter l'état d'édition dans IText à l'aide de FabricJS ?
Dans ce tutoriel, nous apprendrons comment quitter l'état d'édition dans IText à l'aide de FabricJS. La classe IText a été introduite dans FabricJS version 1.4, qui étend Fabric.Text et est utilisée pour créer des instances IText. Les instances IText nous donnent la liberté de sélectionner, couper, coller ou ajouter un nouveau texte sans configuration supplémentaire. Il existe également diverses combinaisons de touches et combinaisons souris/tactile prises en charge pour rendre le texte interactif qui ne sont pas disponibles dans Texte.
Cependant, Textbox basé sur IText nous permet de redimensionner le rectangle de texte et de l'envelopper automatiquement. Ce n'est pas le cas pour IText, car la hauteur ne s'ajuste pas en fonction des sauts de ligne. Nous pouvons manipuler des objets IText en utilisant diverses propriétés. De même, nous pouvons utiliser la méthode exitEditing pour quitter l’état d’édition.
exitEditing(): Itext.IText
Utilisez uniquement l'attribut isEditing
Regardons un exemple de code pour voir à quoi ressemble un objet IText lorsque vous utilisez la propriété isEditing seule et que vous transmettez une valeur vraie pour activer le mode édition. Puisque nous n'utilisons pas la méthode exitEditing(), notre objet IText sera en mode édition.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the isEditing property only</h2> <p>You can see that the editing mode is on</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate an itext object var itext = new fabric.IText("Add sample text here.", { width: 300, left: 60, top: 70, fill: "red", isEditing: true, }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
Utilisez la méthode exitEditing avec l'attribut isEditing
Regardons un exemple de code pour voir à quoi ressemble un objet IText lorsque la méthode exitEditing est utilisée en conjonction avec la propriété isEditing. Puisque nous avons transmis une valeur vraie à la propriété isEditing, l'objet IText doit être en mode édition. Cependant, une fois que nous utilisons la méthode exitEditing, le mode édition se termine.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the exitEditing method along with the isEditing property</h2> <p>You can see that the editing mode is off even though we have passed the isEditing property a true value</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate an itext object var itext = new fabric.IText("Add sample text here.", { width: 300, left: 60, top: 70, fill: "red", isEditing: true, }); // Add it to the canvas canvas.add(itext); // Using the exitEditing method itext.exitEditing(); </script> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!