Maison > Article > interface Web > Comment ajouter des espaces entre les caractères dans IText à l'aide de FabricJS ?

Comment ajouter des espaces entre les caractères dans IText à l'aide de FabricJS ?

PHPzavant: 2023-09-02 12:49:08644parcourir

如何使用 FabricJS 在 IText 中的字符之间添加空格？

Dans ce tutoriel, nous apprendrons comment ajouter des espaces entre les caractères dans un objet 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 également ajouter des espaces supplémentaires entre chaque caractère en utilisant la propriété charSpacing.

Grammaire

new fabric.IText(text: String , { charSpacing: Number }: Object)

Paramètres

text - Ce paramètre accepte une String , qui est la chaîne de texte que nous voulons afficher.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet IText. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés de l'objet IText liées à la propriété charSpacing.

Touche d'option

charSpacing - Cette propriété accepte un number qui nous permet de contrôler l'espace supplémentaire entre les caractères. Exprimé en milliers d'unités em.

Exemple 1

Apparence par défaut des objets IText

Regardons un exemple de code pour voir à quoi ressemble un objet IText par défaut lorsqu'il n'utilise pas la propriété charSpacing.

<!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 a IText object</h2>
   <p>You can see the default appearance of IText object when charSpacing property is not used </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: "green",
            fontStyle: "bold",
         }
      );

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

Exemple 2

Passez l'attribut charSpacing comme clé

Dans cet exemple, nous verrons comment attribuer une valeur à la propriété charSpacing pour ajouter des espaces supplémentaires entre les caractères. Dans ce cas, nous avons dépassé la valeur 100, donc l'espace augmentera en conséquence.

<!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>Passing charSpacing property as key</h2>
  <p>You can see the space between each character has increased</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: 110,
         top: 70,
         fill: "green",
         fontStyle: "bold",
         charSpacing: 100,
      });

      // 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!

String 字符串对象 fabric

Déclaration：

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

Article précédent：Introduction à Anime.jsArticle suivant：Introduction à Anime.js

Articles Liés

Voir plus