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

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

WBOYavant: 2023-09-20 08:37:041042parcourir

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

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

Grammaire

getObjectScaling(): Object

Utilisez la méthode getObjectscaling

Exemple

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>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment obtenir 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,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectScaling method
      console.log("The scale factor is", image.getObjectScaling());
   </script>
</body>
</html>

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

Exemple

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 image 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>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment obtenir 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,
         scaleX: 2,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectScaling method
      console.log("The scale factor is", image.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：Méthode process.cpuUsage() dans Node.jsArticle suivant：Méthode process.cpuUsage() dans Node.js

Articles Liés

Voir plus