Heim > Artikel > Web-Frontend > Wie drehe ich ein Dreieck mit FabricJS vertikal um?

Wie drehe ich ein Dreieck mit FabricJS vertikal um?

王林nach vorne: 2023-08-23 20:29:131107Durchsuche

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

In diesem Tutorial lernen wir, wie man mit FabricJS ein Dreieckobjekt vertikal spiegeln kann. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft flipY können wir das Dreiecksobjekt vertikal spiegeln.

Syntax

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

Parameter

Optionen (optional)− Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, dessen flipY ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Optionsschlüssel

flipY – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, das Objekt vertikal zu spiegeln.

Beispiel 1

FlipY als Schlüssel mit dem Wert „false“ übergeben p>

Sehen wir uns ein Codebeispiel an, das uns die Standardausrichtung von Dreiecksobjekten in FabricJS zeigt. Da wir der Eigenschaft flipY einen False-Wert übergeben haben, wird das Dreiecksobjekt nicht vertikal gespiegelt.

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

Beispiel 2

Übergabe der FlipY-Eigenschaft als Schlüssel mit dem Wert „true“

In diesem Beispiel haben wir ein Dreiecksobjekt mit einer Breite von 180 Pixel und einer Höhe von 109 Pixel mit einer vertikalen linearen Farbverlaufsfüllung. Wenn wir die Eigenschaft flipY auf das Dreieckobjekt anwenden, wird es vertikal gespiegelt, sodass wir auch das gespiegelte Dreieck sehen.

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

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Dreieck mit FabricJS vertikal um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann ich die forEach()-Methode in JavaScript stoppen?Nächster Artikel：Wie kann ich die forEach()-Methode in JavaScript stoppen?

In Verbindung stehende Artikel

Mehr sehen