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

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

WBOY

Libérer： 2023-08-24 16:09:13

avant

1207 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un Objet< /em> 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< /strong>

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>

Copier après la connexion

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>

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!