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é.
new fabric.Ellipse({ opacity: Number }: Object)
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.
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.
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>
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!