Maison > Article > interface Web > Comment ajouter une ombre au triangle en utilisant FabricJS ?

Comment ajouter une ombre au triangle en utilisant FabricJS ?

王林avant: 2023-09-04 09:21:13644parcourir

如何使用 FabricJS 向三角形添加阴影？

Dans ce tutoriel, nous apprendrons comment ajouter une ombre à un triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Notre objet triangle peut être personnalisé de plusieurs manières, comme en changeant ses dimensions, en ajoutant une couleur de fond, ou même en ajoutant une ombre. Nous pouvons ajouter une ombre au triangle en utilisant la propriété Shadow.

Syntaxe

new fabric.Triangle({ shadow : fabric.Shadow }: Object)

Paramètres

Options(facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées aux objets dont l'ombre est un attribut.

Option Keys

Shadow - Cette propriété accepte un objet fabric.Shadow qui nous permet d'ajouter une ombre à notre objet triangle.

Exemple 1

Passer un objet shadow à la propriété shadow

Regardons un exemple de code pour voir comment attribuer une valeur à la propriété shadow afin d'ajouter une ombre à un objet triangle. Tout d’abord, nous devons créer une nouvelle instance fabric.Shadow, puis attribuer cette instance à notre propriété shadow.

<!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 shadow object to the shadow property</h2>
   <p>You can see that an orange shadow has been added to the triangle</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "orange",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

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

Exemple 2

Passer des valeurs RGBA à l'objet ombre

Nous pouvons également ajuster l'ombre et lui donner une apparence floue en spécifiant des valeurs RGBA, représentant le rouge, le vert, le bleu et l'alpha. Alpha détermine l'opacité de la couleur.

<!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 an rgba value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(139,0,139,0.8)",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </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：Comparaison de 4 façons d'itérer des tableaux en JavaScriptArticle suivant：Comparaison de 4 façons d'itérer des tableaux en JavaScript

Articles Liés

Voir plus