Maison > Article > interface Web > Comment calculer la hauteur d'un caractère à une position donnée dans le texte à l'aide de FabricJS ?

Comment calculer la hauteur d'un caractère à une position donnée dans le texte à l'aide de FabricJS ?

WBOYavant: 2023-08-25 08:29:02527parcourir

如何使用 FabricJS 计算文本中给定位置的字符高度？

Dans ce tutoriel, nous apprendrons comment calculer la hauteur de ligne à l'index de ligne souhaité dans le texte à l'aide de FabricJS. Nous pouvons afficher du texte sur le canevas en ajoutant une instance de Fabric.Text. Non seulement il nous permet de déplacer, redimensionner et modifier les dimensions du texte, mais il fournit également des fonctionnalités supplémentaires telles que l'alignement du texte, la décoration du texte, la hauteur de ligne, qui sont disponibles respectivement via les propriétés textAlign, underline et lineHeight. Nous pouvons également calculer la hauteur de ligne à l'index de ligne souhaité à l'aide de la méthode getHeightOfLine.

Grammaire

getHeightOfLine(lineIndex: Number)

Paramètres

lineIndex - Ce paramètre accepte Number comme valeur. La valeur donnée détermine l'indice de la ligne dont nous voulons calculer la hauteur.

Exemple 1

Utilisez la méthode getHeightOfLine

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getHeightOfLine. Dans ce cas, la hauteur de la ligne à l'index de la ligne 1 sera affichée dans la console.

<!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 getHeightOfLine method</h2>
   <p>You can open console from dev tools and see that the height of line is being displayed in the console </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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

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

      // Using getHeightOfLine method
      console.log("The height of line is", text.getHeightOfLine(1));
   </script>
</body>
</html>

Exemple 2

Utilisez la méthode getHeightOfLine et transmettez différentes tailles de police

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getHeightOfLine avec différentes tailles de police de 30. Dans ce cas, la hauteur de ligne à l'index de ligne 0 sera affichée avec la taille de police donnée.

<!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 getHeightOfLine method and passing a different font size</h2>
   <p>You can open console from dev tools and see that the height of line is being displayed in the console </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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         fontSize: 30
      });

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

      // Using getHeightOfLine method
      console.log("The height of line is", text.getHeightOfLine(0));
   </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：Comment écrire du code de fonction de mémorisation simple en JavaScript ?Article suivant：Comment écrire du code de fonction de mémorisation simple en JavaScript ?

Articles Liés

Voir plus