Maison >interface Web >js tutoriel >Comment obtenir la hauteur du texte mise à l'échelle à l'aide de FabricJS ?

Comment obtenir la hauteur du texte mise à l'échelle à l'aide de FabricJS ?

WBOYavant: 2023-08-23 21:37:081354parcourir

Comment obtenir la hauteur du texte mise à léchelle à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment obtenir la hauteur de zoom du texte à l'aide de FabricJS. Nous pouvons afficher du texte sur le canevas en ajoutant une instance de fabric.Text. Il nous permet non seulement de déplacer, redimensionner et modifier la taille du texte, mais fournit également d'autres fonctions telles que l'alignement du texte, la décoration du texte et la hauteur de ligne, qui peuvent être obtenues respectivement via les propriétés textAlign, underline et lineHeight. Nous pouvons également utiliser la méthode getScaledHeight pour trouver la hauteur mise à l'échelle d'un objet.

Grammaire

getScaledHeight()

La traduction chinoise de

Exemple 1

est :

Exemple 1

Utilisez la méthode getScaledHeight

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getScaledHeight. Dans ce cas, la hauteur de l'objet sera renvoyé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 getScaledHeight method</h2>
   <p>You can open console from dev tools and see that the height value 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 getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </script>
</body>
</html>

Exemple 2

se traduit par :

Exemple 2

Utilisez la méthode getScaledHeight et transmettez la propriété scaleY

Voyons un exemple de code pour voir la sortie enregistrée lorsque la méthode getScaledHeight est utilisée en conjonction avec la propriété scaleY. Dans ce cas, la hauteur finale mise à l'échelle 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 getScaledHeight method and passing the scaleY property</h2>
   <p>You can open console from dev tools and see that the height value is being displayed in the console 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 a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         scaleY: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);
      
      // Using getScaledHeight method
      console.log("The scaled height is", text.getScaledHeight());
   </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 créer des variables privées en JavaScript ?Article suivant：Comment créer des variables privées en JavaScript ?

Articles Liés

Voir plus