Maison > Article > interface Web > Comment obtenir le facteur d'échelle de l'objet de Text à l'aide de FabricJS ?

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

PHPzavant: 2023-08-27 23:13:08980parcourir

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()

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>

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>

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!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment vérifier si un navigateur prend en charge une propriété CSS en utilisant JavaScript ?Article suivant：Comment vérifier si un navigateur prend en charge une propriété CSS en utilisant JavaScript ?

Articles Liés

Voir plus