Maison > Article > interface Web > Comment définir l'opacité d'une ellipse à l'aide de FabricJS ?

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

WBOYavant: 2023-08-24 16:09:131237parcourir

如何使用 FabricJS 设置椭圆的不透明度？

Dans ce tutoriel, nous apprendrons comment définir l'opacité d'une ellipse à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Afin de créer une ellipse, nous devons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas. Nous pouvons personnaliser l'objet ellipse en ajoutant une couleur de remplissage, en supprimant ses bordures et même en modifiant ses dimensions. De même, nous pouvons également utiliser la propriété opacity pour modifier son opacité.

Syntaxe

new fabric.Ellipse({ opacity: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre ellipse. Grâce à ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés liées à l'objet dont opacité est un attribut.

Option Key

Opacity - Cette propriété accepte un number强> qui nous permet de contrôler l'opacité de l'objet. La valeur par défaut de la propriété opacity est 1.

Exemple 1

Apparence par défaut de l'objet ellipse

Regardons un extrait de code pour voir à quoi ressemble notre objet ellipse avec la valeur par défaut de la propriété opacity. Dans cet exemple, nous ne transmettons aucune clé d'opacité à la classe 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>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passer l'attribut opacity comme clé

Dans cet exemple, nous verrons comment attribuer la valeur opacity La propriété modifie l'opacité de l'objet ellipse dans le canevas. Ici, nous utilisons 0,3 comme opacité, faisant ainsi apparaître notre objet ellipse semi-transparent plutôt que 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>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            opacity: 0.3,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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 déclencher immédiatement une boucle setInterval en utilisant JavaScript ?Article suivant：Comment déclencher immédiatement une boucle setInterval en utilisant JavaScript ?

Articles Liés

Voir plus