Heim >Web-Frontend >js-Tutorial >Wie stelle ich den Drehwinkel eines Kreises mit FabricJS ein?

Wie stelle ich den Drehwinkel eines Kreises mit FabricJS ein?

王林nach vorne: 2023-09-14 08:57:231590Durchsuche

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

In diesem Tutorial legen wir den Drehwinkel eines Kreises mit FabricJS fest. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Die Eigenschaft angle in FabricJS definiert den 2D-Rotationswinkel eines Objekts. Wir haben auch die Eigenschaft „centeredRotation“, die es uns ermöglicht, den Mittelpunkt des Kreises als Ursprung der Transformation zu verwenden.

Syntax

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt 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 Kreis ändern, wobei angle und centeredRotation Eigenschaften sind. p>

Optionstaste

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

Beispiel 1

Winkel als Schlüssel mit benutzerdefiniertem Wert übergeben und zentrierte Drehung des Kreises deaktivieren

Das folgende Beispiel zeigt, wie der Drehwinkel eines Kreises in FabricJS festgelegt wird. Negative Winkel geben eine Richtung gegen den Uhrzeigersinn an, während positive Winkel eine Richtung im Uhrzeigersinn angeben. Da wir für centeredRotation einen False-Wert angegeben haben, dreht sich der Kreis und verwendet dabei seine 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>Set the angle of rotation of a Circle using FabricJS</h2>
      <p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -60,
            centeredRotation: false,
         });

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

Beispiel 2

Zentrierte Rotation eines Kreises aktivieren

Aus diesem Beispiel können wir ersehen, dass unser Kreis nun seinen 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>Set the angle of rotation of a Circle using FabricJS</h2>
      <p>Select the object and observe its controlling corners. Here we have set the angle of rotation at 60 degrees in the anti-clockwise direction, and when you rotate the circle, it will rotate around its center, as we have set <b>centeredRotation</b> to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -60,
            centeredRotation: true,
         });

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

Das obige ist der detaillierte Inhalt vonWie stelle ich den Drehwinkel 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：Wie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?Nächster Artikel：Wie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?

In Verbindung stehende Artikel

Mehr sehen