Comment ajouter une ligne à IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment ajouter une ligne à IText à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-02 22:37:02

avant

1223 Les gens l'ont consulté

如何使用 FabricJS 向 IText 添加 linethrough？

Dans ce tutoriel, nous apprendrons comment ajouter un linethrough à 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 ajouter linethrough en utilisant l'attribut linethrough.

Grammaire

new fabric.IText(text: String , { linethrough: Boolean }: Object)

Copier après la connexion

Paramètres

text - Ce paramètre accepte une chaîne qui est le texte string que nous voulons afficher.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet IText. Grâce à ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés liées à l'objet dont linethrough est un attribut.

Touche d'option

inethrough - Cette propriété accepte une valeur Boolean qui nous permet de spécifier si la décoration du texte est requise.

Exemple 1

Apparence par défaut des objets IText

Regardons un exemple de code pour voir à quoi ressemble notre objet IText lorsque nous n'utilisons pas la propriété linethrough.

<!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 there is no linethrough on text</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",
      });

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

Copier après la connexion

Exemple 2

Passez l'attribut linethrough comme clé avec la valeur true

Dans cet exemple, nous transmettons la propriété linethrough comme clé avec une valeur true, ce qui ajoutera une ligne à notre objet IText.

<!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 the linethrough property as key with the value as true</h2>
   <p>You can see that the linethrough has been added</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",
         linethrough: true,
      });

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