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

Comment définir l'opacité du cercle à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-03 17:17:07

avant

550 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment définir l'opacité d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Pour créer un cercle, nous allons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Nous pouvons personnaliser l'objet circulaire 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.Circle({ opacity: Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire pour nos cercles. Avec ce paramètre, il est possible de changer la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés associées à l'objet pour lequel opacity est un attribut

touche d'option

opacity - cette propriété accepte nombres Permet de contrôler l'opacité de l'objet. La valeur par défaut de l'attribut d'opacité est 1.

Exemple 1

Apparence par défaut d'un objet circulaire

Regardons un extrait de code pour voir à quoi ressemble notre objet circulaire lorsque nous utilisons la valeur par défaut de la propriété opacity.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the opacity of Circle using FabricJS</h2> <p>Here we haven't used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, radius: 50, fill: "#ff1493" }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copier après la connexion
Exemple 2
Passage de la propriété Opacity comme clé
Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété Opacity modifie l'opacité d'un objet circulaire dans notre canevas. Ici, nous utilisons 0,3 comme opacité, ce qui donne à notre objet circulaire un aspect semi-transparent au lieu de complètement opaque.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the opacity of Circle using FabricJS</h2> <p>Here we have set the <b>opacity</b> at 0.3, which is why the circle appears dull. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, radius: 50, fill: "#ff1493", opacity: 0.3 }); // Adding it to the canvas canvas.add(circle); 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!