简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie deaktiviere ich die Mittendrehung eines Rechtecks ​​mit FabricJS?

Wie deaktiviere ich die Mittendrehung eines Rechtecks ​​mit FabricJS?

王林
王林nach vorne
2023-09-09 19:13:121116Durchsuche

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)

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

    Sehen wir uns ein Codebeispiel an, das das Standardverhalten eines Rechteckobjekts beschreibt. Da die Eigenschaft „centeredRotation“ standardmäßig auf „true“ gesetzt ist, verwendet das rechteckige 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>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>
    Beispiel 2

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

    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>

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!

对象 ul 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 füge ich mit JavaScript Elemente zu einem JSON-Objekt hinzu?Nächster Artikel：Wie füge ich mit JavaScript Elemente zu einem JSON-Objekt hinzu?

In Verbindung stehende Artikel

Mehr sehen