Maison > Article > interface Web > Comment retourner un triangle verticalement en utilisant FabricJS ?

Comment retourner un triangle verticalement en utilisant FabricJS ?

王林avant: 2023-08-23 20:29:131106parcourir

如何使用 FabricJS 垂直翻转三角形？

Dans ce tutoriel, nous allons apprendre à retourner un objet Triangle verticalement à 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. Nous pouvons retourner l'objet triangle verticalement en utilisant la propriété flipY.

Syntaxe

new fabric.Triangle({ flipY: Boolean }: Object)

Paramètres

Options (facultatif)− Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet dont flipY est un attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Option Key

flipY - Cette propriété accepte une valeur Boolean qui nous permet de retourner l'objet verticalement.

Exemple 1

Passer FlipY comme clé avec une valeur "fausse" p>

Regardons un exemple de code qui nous montre l'orientation par défaut des objets triangulaires dans FabricJS. Puisque nous avons passé une valeur False à la propriété flipY, l'objet triangle ne se retournera pas verticalement.

<!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 flipY as key with a &#39;false&#39; value</h2>
   <p>You can see that the triangle object has not been flipped vertically.</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 triangle object
         var triangle = new fabric.Triangle({
         left: 75,
         top: 45,
         width: 180,
         height: 109,
         stroke: "#e3f988",
         strokeWidth: 5,
         flipY: false,
      });

      // Create gradient fill
      triangle.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
                  { offset: 0, color: "#545a2c" },
                  { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Exemple 2

Passer la propriété FlipY comme clé avec une valeur de "true"

Dans cet exemple, nous avons un objet triangle d'une largeur de 180 px et d'une hauteur de 109 px avec un remplissage dégradé linéaire vertical. Lorsque nous appliquons la propriété flipY à l'objet triangle, il se retourne verticalement, nous voyons donc également le triangle inversé.

<!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 flipY property as key with a &#39;true&#39; value</h2>
   <p>You can see that the triangle object has been flipped vertically</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 triangle object
      var triangle = new fabric.Triangle({
         left: 75,
         top: 45,
         width: 180,
         height: 109,
         stroke: "#e3f988",
         strokeWidth: 5,
         flipY: true,
      });

      // Create gradient fill
      triangle.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color:"#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );

      // 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!

Déclaration：

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

Article précédent：Comment arrêter la méthode forEach() en JavaScript ?Article suivant：Comment arrêter la méthode forEach() en JavaScript ?

Articles Liés

Voir plus