Maison > Article > interface Web > Comment insérer des caractères dans IText à l'aide de FabricJS ?

Comment insérer des caractères dans IText à l'aide de FabricJS ?

WBOYavant: 2023-08-31 08:53:03914parcourir

Comment insérer des caractères dans IText à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment insérer des caractères 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 insérer des caractères en utilisant la méthode insertChars.

Grammaire

insertChars(text: String, style: Array, start: Number, end: Number)

Paramètres

text - Ce paramètre accepte une String qui spécifie le texte à insérer.
style - Ce paramètre accepte un array représentant un tableau d'objets de style à appliquer au texte.
start - Ce paramètre accepte un numéro indiquant la position où le caractère doit être inséré.
end - Ce paramètre accepte un Number marquant la position finale. La valeur par défaut est début +1.

Exemple 1

Apparence par défaut de l'objet IText

Regardons un exemple de code pour voir à quoi ressemble un objet IText par défaut lorsqu'il n'utilise pas la méthode insertChars. Dans ce cas, aucun caractère ne sera inséré

<!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>Default appearance of IText object</h2>
   <p>You can see that no characters have been inserted.</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 HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#b666d2",
            backgroundColor: "#f8f4ff",
         }
      );

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

Exemple 2

Utilisez la méthode insertChars

Regardons un exemple de code pour voir à quoi ressemble un objet IText lors de l'utilisation de la méthode insertChars. Dans cet exemple, "a" a été inséré dans le 6ème index à la position "m" car il s'agit de la position de départ. Puisque nous avons fourni une gamme de styles, les modifications de style nécessaires sont également appliquées.

<!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 insertChars method</h2>
   <p>You can see the character "m" has been replaced with "a"</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 HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#b666d2",
            backgroundColor: "#f8f4ff",
         }
      );

      // Using the insertChars method
      itext.insertChars("a", [{ fill: "green", fontStyle: "bold" }], 6, 7);

      // Add it to the canvas
      canvas.add(itext);
   </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!

Déclaration：

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

Article précédent：Validation des formulaires à l'aide de Parsley.jsArticle suivant：Validation des formulaires à l'aide de Parsley.js

Articles Liés

Voir plus