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

Wie drehe ich ein Rechteck mit FabricJS vertikal um?

PHPznach vorne: 2023-09-09 20:09:021033Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Rechteckobjekt vertikal 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 FlipY können wir das rechteckige Objekt vertikal spiegeln.

Syntax

new fabric.Rect({ flipY: 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 FlipY als Attribut ändern.

Optionsschlüssel

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

Beispiel 1

Übergabe von flipY als Schlüssel mit dem Wert „Falsch“

Schauen wir uns ein Codebeispiel an, das uns die Standardausrichtung eines Rechteckobjekts in FabricJS zeigt. Da wir der Eigenschaft flipY einen False-Wert übergeben haben, wird das rechteckige Objekt 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 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>

Beispiel 2

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

In diesem Beispiel haben wir ein rechteckiges Objekt mit einer Breite von 170 px und einer Höhe von 70 px mit einer Vertikalen lineare Farbverlaufsfüllung. Wenn wir die FlipY-Eigenschaft auf das rechteckige Objekt anwenden, wird es vertikal 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 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>

Das obige ist der detaillierte Inhalt vonWie drehe ich ein Rechteck mit FabricJS vertikal 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 verwende ich JavaScript, um den Rand des Eingabefelds nach dem Ausfüllen zu ändern?Nächster Artikel：Wie verwende ich JavaScript, um den Rand des Eingabefelds nach dem Ausfüllen zu ändern?

In Verbindung stehende Artikel

Mehr sehen