Comment définir l'opacité d'une image à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir l'opacité d'une image à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-24 23:53:10

avant

1006 Les gens l'ont consulté

Comment définir lopacité dune image à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir l'opacité d'une image à l'aide de FabricJS. nous Les objets image peuvent être créés en créant une instance de fabric.Image. puisque c'est l'un des Élément de base de FabricJS, on peut aussi le personnaliser facilement en appliquant des propriétés Tels que l'angle, l'opacité, etc. Pour définir l'opacité d'une image, nous utilisons l'attribut opacity.

Grammaire

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)

Copier après la connexion

Paramètres

element - Ce paramètre accepte un HTMLImageElement, un HTMLCanvasElement, un HTMLVideoElement ou une chaîne représentant un élément d'image. La chaîne doit être une URL et sera chargée sous forme d'image.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet. À l'aide de ce paramètre, vous pouvez modifier l'origine, la largeur du trait et de nombreuses autres propriétés liées aux objets image dont l'opacité est un attribut.
rappel (facultatif) - Ce paramètre est une fonction qui est appelée après l'application du filtre final.. < /p>

Touche d'option

opacité - Cette propriété accepte un Numéro qui nous permet de contrôler une chose. La valeur par défaut de la propriété opacity est 1.

Apparence par défaut de l'objet Image

Exemple

Regardons un exemple de code pour voir à quoi ressemble notre objet image avec les valeurs par défaut Propriété Opacité. Dans cet exemple, nous ne transmettons aucune clé opaque comme indiqué ci-dessous -

<!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>Default appearance of Image object</h2>
   <p>You can see that the image object is fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment définir l'opacité 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: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copier après la connexion

Passez l'attribut opacity comme clé

Exemple

Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété opacity change L'opacité de l'objet image dans le canevas. Ici, nous utilisons 0,3 comme opacité, donc Rend notre objet image semi-transparent au lieu de complètement opaque.

<!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>Passing the opacity property as key</h2>
   <p>You can see our image object is not fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment définir l'opacité 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: 50,
         opacity: 0.3,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </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!