Comment utiliser FabricJS pour entrer dans l'état d'édition à l'aide des fonctions d'IText ?-js tutoriel-php.cn

Comment utiliser FabricJS pour entrer dans l'état d'édition à l'aide des fonctions d'IText ?

王林

Libérer： 2023-08-28 12:01:17

avant

973 Les gens l'ont consulté

Comment utiliser FabricJS pour entrer dans létat dédition à laide des fonctions dIText ?

Dans ce tutoriel, nous apprendrons comment entrer dans l'état d'édition à l'aide de la fonctionnalité IText dans 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 enterEditing pour entrer dans l’état d’édition.

Grammaire

enterEditing(): fabric.IText

Copier après la connexion

Exemple 1

Ne pas utiliser la méthode enterEditing

Regardons un exemple de code pour voir à quoi ressemble un objet IText sans utiliser la méthode EnterEditing.

<!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>Without using the enterEditing method</h2>
   <p>You can see that the editing mode is off</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",
      });

      // Add it to the canvas
      canvas.add(itext);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Utilisez la méthode enterEditing

Regardons un exemple de code pour voir à quoi ressemble un objet IText lorsqu'il entre dans l'état d'édition à l'aide de la méthode enterEditing. Dans ce cas, notre objet itext sera désormais en mode édition car le curseur est là.

<!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>Without using the enterEditing method</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",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using enterEditing method
      itext.enterEditing();
   </script>
</body>
</html>

Copier après la connexion

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!