Heim > Artikel > Web-Frontend > Wie stelle ich den Rotationswinkel einer Ellipse mit FabricJS ein?

Wie stelle ich den Rotationswinkel einer Ellipse mit FabricJS ein?

PHPznach vorne: 2023-09-10 13:29:021419Durchsuche

如何使用 FabricJS 设置椭圆的旋转角度？

In diesem Tutorial legen wir den Rotationswinkel der Ellipse mit FabricJS fest. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, müssen wir eine Instanz der Fabric.Ellipse-Klasse erstellen und sie der Leinwand hinzufügen. Die Winkeleigenschaft in FabricJS definiert den 2D-Rotationswinkel eines Objekts. Wir haben auch die Eigenschaft centeredRotation, die es uns ermöglicht, den Mittelpunkt der Ellipse als Ursprung der Transformation zu verwenden.

Syntax

new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit der Leinwand zu ändern, von denen Winkel und centeredRotation Eigenschaften sind.

Optionstaste

Angle – Diese Eigenschaft akzeptiert eine Zahl, die den Drehwinkel der Ellipse in Grad angibt.
centeredRotation – Diese Eigenschaft akzeptiert einen booleschen Wert, der bestimmt, ob der Mittelpunkt der Ellipse der Ursprung der Transformation ist.

Beispiel 1

Übergeben Sie angle als Schlüssel mit einem benutzerdefinierten Wert und deaktivieren Sie die zentrierte Drehung der Ellipse.

Nehmen wir ein Beispiel für die Einstellung des Rotationswinkels einer Ellipse in FabricJS. Negative Winkel geben eine Richtung gegen den Uhrzeigersinn an, während positive Winkel eine Richtung im Uhrzeigersinn angeben. Da wir centeredRotation den Wert „false“ zugewiesen haben, dreht sich die Ellipse und verwendet dabei ihre Eckpunkte als Rotationszentrum.

<!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>How to set the angle of rotation of an Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. Here we have set the angle of rotation at <b>-40</b></p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 180,
            top: 180,
            rx: 90,
            ry: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -40,
            centeredRotation: false
         })

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Ellipsenzentrierte Rotation aktivieren

Aus diesem Beispiel können wir ersehen, dass unsere Ellipse nun ihren Mittelpunkt als Rotationszentrum verwendet, indem wir die Eigenschaft centeredRotation auf „true“ setzen. Vor Version 1.3.4 waren centeredScaling und centeredRotation in einer Eigenschaft namens centerTransform enthalten.

<!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>How to set the angle of rotation of an Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. You will notice that the object rotates around its center as we have set the <b>centeredRotation</b> property to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 180,
            top: 180,
            rx: 90,
            ry: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -40,
            centeredRotation: true
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich den Rotationswinkel einer Ellipse 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：Erhöhen Sie das angegebene Datum in JavaScriptNächster Artikel：Erhöhen Sie das angegebene Datum in JavaScript

In Verbindung stehende Artikel

Mehr sehen