Maison > Article > interface Web > Comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?

Comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?

PHPzavant: 2023-08-23 20:49:03952parcourir

Comment trouver le facteur déchelle dobjet dune image à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS. Nous pouvons créer un objet image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour trouver le facteur d'échelle d'objet d'une image, nous utilisons la méthode getTotalObjectScaling.

Grammaire

getTotalObjectScaling(): Object

Utilisez la méthode getTotalObjectScaling

La traduction chinoise de

Exemple

est :

Exemple

Dans cet exemple, nous utilisons la méthode getTotalObjectScaling pour obtenir le facteur de mise à l'échelle de l'objet de l'image. Dans ce cas, la sortie enregistrée est d'environ 1,5 pour scaleX et scaleY respectivement.

<!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 getTotalObjectScaling method</h2>
   <p>
      You can open the console from dev tools to see that the logged output
      contains the object scale factor
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
      });
      // Add it to the canvas
      canvas.add(image);
      // Using the getTotalObjectScaling method
      console.log(
         "The scale factor of the Image object is: ",
         image.getTotalObjectScaling()
      );
   </script>
</body>
</html>

Utilisez la méthode getTotalObjectScaling et la propriété scaleX

La traduction chinoise de

Exemple

est :

Exemple

Regardons un exemple de code de ce à quoi ressemble la sortie du journal lors de l'utilisation de la méthode getTotalObjectScaling avec la propriété scaleX. Ici, nous définissons la valeur de l'attribut scaleX sur 2. Ainsi, la sortie du journal montre que la valeur de scaleX est d'environ 3, tandis que la valeur de scaleY reste la même.

<!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 getTotalObjectScaling method along with scaleX property</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the object scale factor
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment trouver le facteur d'échelle d'objet d'une image à l'aide de FabricJS ?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 15,
         scaleX: 2, 
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getTotalObjectScaling method
      console.log(
         "The scale factor of the Image object is: ",
         image.getTotalObjectScaling()
      );
   </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 tester une valeur x par rapport à une fonction prédicat en JavaScript et renvoyer fn(x) ou x ?Article suivant：Comment tester une valeur x par rapport à une fonction prédicat en JavaScript et renvoyer fn(x) ou x ?

Articles Liés

Voir plus