Comment obtenir la largeur du texte mise à l'échelle à l'aide de FabricJS-js tutoriel-php.cn

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

PHPz

Libérer： 2023-08-25 09:13:02

avant

797 Les gens l'ont consulté

如何使用 FabricJS 获取文本的缩放宽度

Dans ce tutoriel, nous apprendrons comment obtenir la largeur mise à l'échelle du 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 trouver la largeur mise à l'échelle d'un objet en utilisant la méthode getScaledWidth.

Grammaire

getScaledWidth()

Copier après la connexion

Exemple 1

Utilisez la méthode getScaledWidth

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

Copier après la connexion

Exemple 2

Utilisez la méthode getScaledWidth et transmettez la propriété scaleX

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode getScaledWidth est utilisée en conjonction avec la propriété scaleY. Dans ce cas, la largeur 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 getScaledWidth method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the width 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",
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getScaledWidth method
      console.log("The scaled width is", text.getScaledWidth());
   </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!