Heim > Artikel > Web-Frontend > Wie stelle ich den X-Achsen-Neigungswinkel eines Kreises mit FabricJS ein?

Wie stelle ich den X-Achsen-Neigungswinkel eines Kreises mit FabricJS ein?

WBOYnach vorne: 2023-09-10 19:41:02859Durchsuche

如何使用 FabricJS 设置圆的 X 轴倾斜角度？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Neigungswinkel der X-Achse eines Kreises festlegen. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, erstellen wir eine Instanz der Klasse fabric.Circle und fügen sie der Leinwand hinzu. Unser Kreisobjekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Hinzufügen einer Hintergrundfarbe oder durch Ändern des Neigungswinkels auf der X-Achse. Wir können dies tun, indem wir das Attribut skewX verwenden.

Syntax

new fabric.Circle({ skewX : Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, dessen skewX ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Optionstaste

skewX – Diese Eigenschaft akzeptiert eine Zahl, die den Neigungswinkel auf der X-Achse des Objekts bestimmt.

Beispiel 1

>Wenn die skewX-Eigenschaft nicht angewendet wird

Sehen wir uns ein Beispiel an, um zu sehen, wie unser kreisförmiges Objekt aussieht, wenn die skewX-Eigenschaft nicht angewendet wird. In diesem Fall wird unser kreisförmiges Objekt in keinem Winkel verzerrt.

<!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>Setting the angle of skew on X-axis of circle using FabricJS</h2>
      <p>Here we have not applied the <b>skewX</b> property, hence there is no distortion in the object. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

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

In diesem Beispiel sehen wir, wie der numerische Wert der Eigenschaft skewX zugewiesen wird. Der übergebene Wert bestimmt die Drehung entlang der X-Achse. Da wir der Eigenschaft skewX den Wert 30 zugewiesen haben, ist der Effekt so, als ob das kreisförmige Objekt horizontal zusammengedrückt würde, um einen 30-Grad-Winkel zu erzeugen.

<!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>Setting the angle of skew on X-axis of circle using FabricJS</h2>
      <p>Observe that the object is skewed on the X-axis in the clockwise direction at an angle of 30 degrees, as we have set <b>skewX</b> at 30. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5,
            skewX: 30
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich den X-Achsen-Neigungswinkel eines Kreises mit FabricJS ein?. 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：JavaScript-Programm zum Generieren aller ZahlenrotationenNächster Artikel：JavaScript-Programm zum Generieren aller Zahlenrotationen

In Verbindung stehende Artikel

Mehr sehen