Comment ajouter une ombre au triangle en utilisant FabricJS ?-js tutoriel-php.cn

Comment ajouter une ombre au triangle en utilisant FabricJS ?

王林

Libérer： 2023-09-04 09:21:13

avant

638 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

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!