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

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

WBOYavant: 2023-09-21 08:01:091232parcourir

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

Dans ce tutoriel, nous apprendrons comment définir l'opacité d'un rectangle à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter à

Nous pouvons personnaliser l'objet rectangulaire 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.Rect({ opacity: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées aux objets dont l'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 l'attribut d'opacité est 1.

Exemple 1

Apparence par défaut d'un objet rectangulaire

Regardons un exemple de code pour voir à quoi ressemble notre objet rectangulaire 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>Default appearance of a rectangle object</h2>
   <p>You can see our rectangle is fully opaque</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         padding: 9,
         stroke: "#191970",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Exemple 2

Passer l'attribut opacity comme clé

Dans cet exemple, nous verrons comment attribuer la valeur aux changements de propriété Opacity L'opacité de l'objet rectangulaire dans le canevas. Ici, nous utilisons 0,3 comme opacité En conséquence, notre objet rectangulaire apparaît semi-transparent plutôt que totalement 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 rectangle is not fully opaque</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         padding: 9,
         stroke: "#191970",
         strokeWidth: 5,
         opacity: 0.3,
      });

      // Add it to the canvas
      canvas.add(rect);
   </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!

number 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Programme JavaScript pour calculer la fréquence des éléments du tableauArticle suivant：Programme JavaScript pour calculer la fréquence des éléments du tableau

Articles Liés

Voir plus