Wie stelle ich mit FabricJS den Neigungswinkel der Y-Achse eines Rechtecks ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS den Neigungswinkel der Y-Achse eines Rechtecks ein?

WBOY

Freigeben： 2023-09-09 21:33:03

nach vorne

1255 Leute haben es durchsucht

如何使用 FabricJS 设置矩形 Y 轴的倾斜角度？

In diesem Tutorial lernen wir, wie man den Neigungswinkel auf der y-Achse einstellt Rechteck mit FabricJS. Rechteck ist eine der verschiedenen Formen, die von bereitgestellt werden FabricJS. Um ein Rechteck zu erstellen, müssen wir eine Instanz erstellen fabric.Rect Klasse und fügen Sie sie der Leinwand hinzu.

Unser rechteckiges Objekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Fügen Sie eine Hintergrundfarbe hinzu oder ändern Sie den Neigungswinkel auf der Y-Achse. was wir tun können Dies wird mithilfe des Attributs skewY erreicht.

Syntax

new fabric.Rect({ skewY : Number }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, für das skewY das Attribut ist.

Wahltaste

skewY – Diese Eigenschaft akzeptiert eine Zahl, die den Winkel die Neigung des Objekts auf der Y-Achse bestimmt.

Beispiel 1

Wenn die Eigenschaft skewY nicht angewendet wird

Sehen wir uns ein Codebeispiel an, um zu sehen, wie unser rechteckiges Objekt angezeigt wird, wenn die Eigenschaft skewY nicht angewendet wird. In diesem Fall haben wir in unserem rechteckigen Objekt keine Winkelneigung.

<!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>When the skewY property is not applied</h2>
   <p>You can see there is no skew by any angle on the rectangle by default</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
      });

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

Nach dem Login kopieren

Beispiel 2

Übergeben Sie skewY als Schlüssel und weisen Sie ihm einen benutzerdefinierten Wert zu.

In diesem Beispiel sehen wir, wie der numerische Wert von skewY zugewiesen wird Eigentum. Der übergebene Wert bestimmt die Neigung entlang der Y-Achse.

<!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 skewY as key and assigning a custom value to it</h2>
   <p>You can see the rectangle has been skewed by 30 degrees along the Yaxis</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
         skewY: 30,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS den Neigungswinkel der Y-Achse eines Rechtecks ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!