Maison > interface Web > js tutoriel > Comment obtenir l'opacité d'un objet Image à l'aide de FabricJS ?

Comment obtenir l'opacité d'un objet Image à l'aide de FabricJS ?

WBOY
Libérer: 2023-08-28 16:49:09
avant
1330 Les gens l'ont consulté

如何使用 FabricJS 获取 Image 对象的不透明度?

Dans ce tutoriel, nous apprendrons comment obtenir l'opacité 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 l'opacité d'une image, nous utilisons la méthode getObjectOpacity. p>

Grammaire

getObjectOpacity(): Number 
Copier après la connexion

Utilisez la méthode getObjectOpacity

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getObjectOpacity. Dans ce cas, l'opacité par défaut de 1 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 getObjectOpacity 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="display: none" />
   <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 getObjectOpacity method
      console.log("The opacity is: ", image.getObjectOpacity());
   </script>
</body>
</html> 
Copier après la connexion

Utilisez la méthode getObjectOpacity et transmettez la propriété opacity

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode getObjectOpacity est utilisée en conjonction avec la propriété opacity. Dans cet exemple, l'opacité de l'objet image est attribuée à 0,7, donc la sortie enregistrée sera de 0,7.

<!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 getObjectOpacity method and passing the opacity property</h2>
   <p>
      You can open console from dev tools and see that the opacity value is being displayed in the console
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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,
         opacity: 0.7,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectOpacity method
      console.log("The opacity is: ", image.getObjectOpacity());
   </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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal