Wie deaktiviere ich die Mittendrehung eines Rechtecks mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die Mittendrehung eines Rechtecks mit FabricJS?

王林

Freigeben： 2023-09-09 19:13:12

nach vorne

1062 Leute haben es durchsucht

Wie deaktiviere ich die Mittendrehung eines Rechtecks mit FabricJS?

In diesem Tutorial erfahren Sie, wie Sie die zentrierte Drehung eines Rechtecks mithilfe von FabricJS deaktivieren. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. 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.Rect({ centeredRotation: Boolean }: 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 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 Boolean-Wert, mit dem wir steuern können, ob der Mittelpunkt als Transformationsursprung verwendet werden soll, wenn sich das Objekt dreht. Der Standardwert ist True.

Beispiel 1

Standardverhalten der Rechteckrotation in FabricJS

<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Default behaviour of rotation of Rectangle in FabricJS</h2> <p>Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is the default behaviour.</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: 125, top: 90, width: 170, height: 70, fill: "#cf1020", borderColor: "black", borderScaleFactor: 3, }); // Add it to the canvas canvas.add(rect); </script> </body> </html>
Nach dem Login kopieren

Da wir nun das Standardverhalten gesehen haben, werfen wir einen Blick auf ein Codebeispiel, um zu verstehen, was passiert, wenn Sie der „centeredRotation“ einen False-Wert zuweisen Eigentum.

<!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 centeredRotation key with the value as &ldquo;false&rdquo;</h2>
   <p>Click on the rectangle and rotate it to see the changed center of rotation</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredRotation: false,
      });

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

Nach dem Login kopieren

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