Maison >interface Web >js tutoriel >Comment quitter l'état d'édition dans IText à l'aide de FabricJS ?

Comment quitter l'état d'édition dans IText à l'aide de FabricJS ?

PHPzavant: 2023-09-07 14:29:101150parcourir

Comment quitter létat dédition dans IText à laide 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.

Grammaire

exitEditing(): Itext.IText

Exemple 1

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>

Exemple 2

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!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment modifier le texte et les images en cliquant sur un bouton en JavaScript ?Article suivant：Comment modifier le texte et les images en cliquant sur un bouton en JavaScript ?

Articles Liés

Voir plus