Wie deaktiviere ich die Mittelpunktdrehung eines Kreises mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die Mittelpunktdrehung eines Kreises mit FabricJS?

PHPz

Freigeben： 2023-08-31 11:21:06

nach vorne

875 Leute haben es durchsucht

如何使用 FabricJS 禁用圆的居中旋转？

In diesem Tutorial erfahren Sie, wie Sie die Mittendrehung eines Kreises mithilfe von FabricJS deaktivieren. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, erstellen wir eine Instanz der Fabric.Circle-Klasse und fügen sie der Leinwand hinzu. Standardmäßig verwenden alle Objekte in FabricJS ihren Mittelpunkt als Drehpunkt. Wir können dieses Verhalten jedoch mithilfe des Attributs centeredRotation ändern.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut centeredRotation ändern.

Optionstaste

centeredRotation – Diese Eigenschaft akzeptiert einen Booleschen < /strong>-Wert, mit dem wir steuern können, ob das Objekt seinen Transformationsursprung als Mittelpunkt verwendet, wenn es durch das Steuerelement gedreht wird. Der Standardwert ist True.

Beispiel 1

Standardverhalten der Rotation > Kreis in FabricJS

Sehen wir uns ein Beispiel an, das das Standardverhalten eines kreisförmigen Objekts beschreibt. Da die Eigenschaft centeredRotation standardmäßig auf True gesetzt ist, verwendet das kreisförmige Objekt seinen Mittelpunkt als Drehpunkt.

<!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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set 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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

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

Nach dem Login kopieren

Beispiel 2

Übergabe des Schlüssels centeredRotation mit dem Wert „false“

Da wir nun das Standardverhalten gesehen haben, schauen wir uns einen Codeabschnitt an, um zu verstehen, was passiert, wenn das Attribut centeredRotation als angegeben wird FALSCH .

<!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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. Now the circle will not rotate around its cente because we have used the <b>centeredRotation</b> property and set it False. </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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: false
         });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Mittelpunktdrehung eines Kreises mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!