Heim > Artikel > Web-Frontend > Wie drehe ich ein Rechteck mit FabricJS horizontal um?

Wie drehe ich ein Rechteck mit FabricJS horizontal um?

PHPznach vorne: 2023-08-24 18:05:08617Durchsuche

如何使用 FabricJS 水平翻转矩形？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Rechteckobjekt horizontal spiegeln. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft flipX können wir das rechteckige Objekt horizontal spiegeln.

Syntax

new fabric.Rect({ flipX: Boolean }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt , das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften im Zusammenhang mit dem Objekt mit FlipX als Attribut ändern.

Optionsschlüssel

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

Beispiel 1

Übergabe von flipX als Schlüssel mit dem Wert „false“

Schauen wir uns ein Codebeispiel an, das uns die Standardausrichtung eines Rechteckobjekts in FabricJS zeigt. Da wir der Eigenschaft flipX einen False-Wert übergeben haben, wird das rechteckige Objekt nicht horizontal 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 flipX as key with a False value</h2>
   <p>You can see that the object is not flipped horizontally</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,
         flipX: false,
      });

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

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

Beispiel 2

Übergabe des Attributs flipX als Schlüssel mit dem Wert „true“

In diesem Beispiel haben wir ein rechteckiges Objekt mit einer Breite von 170 und einer Höhe von 70 mit einer horizontalen Linie Farbverlaufsfüllung. Wenn wir die FlipX-Eigenschaft auf das rechteckige Objekt anwenden, wird es horizontal gespiegelt, sodass auch der Farbverlauf gespiegelt wird.

<!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 flipX property as key with a True value</h2>
   <p>You can see now that the object has flipped horizontally</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,
         flipX: true,
      });

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

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

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

对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie speichere ich JavaScript-Funktionen in einer Warteschlange und führe sie nacheinander aus?Nächster Artikel：Wie speichere ich JavaScript-Funktionen in einer Warteschlange und führe sie nacheinander aus?

In Verbindung stehende Artikel

Mehr sehen