Comment obtenir le facteur d'échelle de l'objet de Text à l'aide de FabricJS ?-js tutoriel-php.cn

Comment obtenir le facteur d'échelle de l'objet de Text à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-27 23:13:08

avant

963 Les gens l'ont consulté

Comment obtenir le facteur déchelle de lobjet de Text à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment obtenir le facteur d'échelle d'objet 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 le facteur de mise à l'échelle de l'objet en utilisant la méthode getObjectScaling.

Grammaire

getObjectScaling()

Copier après la connexion

Exemple 1

Utilisez la méthode getObjectscaling

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getObjectScaling. Dans ce cas, les valeurs par défaut scaleX et scaleY de 1 seront affichées 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 getObjectScaling method</h2>
   <p>You can open console from dev tools and see that the logged 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 getObjectScaling method
      console.log("The scale factor is", text.getObjectScaling());
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

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

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode getObjectScaling est utilisée en conjonction avec la propriété scaleX. Dans ce cas, la valeur scaleX de l'objet texte apparaîtra être 2, tandis que la valeur scaleY restera inchangé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 getObjectScaling method and passing the scaleX property</h2>
   <p>You can open console from dev tools and see that the logged 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",
         scaleX: 2,
      });

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

      // Using getObjectScaling method
      console.log("The scale factor is", text.getObjectScaling());
   </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!