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

Comment retourner un rectangle verticalement en utilisant FabricJS ?

PHPzavant: 2023-09-09 20:09:02986parcourir

如何使用 FabricJS 垂直翻转矩形？

Dans ce tutoriel, nous allons apprendre à retourner un objet Rectangle verticalement à 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 au canevas. Nous pouvons retourner l'objet rectangulaire verticalement en utilisant la propriété FlipY.

Syntaxe

new fabric.Rect({ flipY: Boolean }: 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 la couleur, le curseur, la largeur du trait et d'autres propriétés liées à l'objet avec FlipY comme attribut.

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 False

Regardons un exemple de code qui nous montre l'orientation par défaut d'un objet rectangle dans FabricJS. Puisque nous avons passé une valeur False à la propriété flipY, l'objet rectangulaire 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 False value</h2>
   <p>You can see that the object has not 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         flipY: false,
      });

      // Create gradient fill
      rect.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 50 },
            colorStops: [
               { offset: 0, color: "pink" },
               { offset: 1, color: "blue" },
            ],
         })
      );

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

Exemple 2

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

Dans cet exemple, nous avons un objet rectangulaire d'une largeur de 170 px et d'une hauteur de 70 px avec une verticale remplissage en dégradé linéaire. Lorsque nous appliquons la propriété FlipY à l'objet rectangulaire, il se retourne verticalement, nous voyons donc également le dégradé 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 True value</h2>
   <p>You can see now that the object has 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         flipY: true,
      });

      // Create gradient fill
      rect.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 50 },
            colorStops: [
               { offset: 0, color: "pink" },
               { offset: 1, color: "blue" },
            ],
         })
      );

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

对象 fabric

Déclaration：

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

Article précédent：Comment utiliser JavaScript pour modifier la bordure de la zone de saisie après l'avoir remplie ?Article suivant：Comment utiliser JavaScript pour modifier la bordure de la zone de saisie après l'avoir remplie ?

Articles Liés

Voir plus