Heim > Artikel > Web-Frontend > Wie aktiviere ich die zentrierte Skalierung auf der Leinwand mit FabricJS?

Wie aktiviere ich die zentrierte Skalierung auf der Leinwand mit FabricJS?

王林nach vorne: 2023-08-29 13:29:02926Durchsuche

如何使用 FabricJS 在画布上启用居中缩放？

In diesem Artikel erfahren Sie, wie Sie mithilfe von FabricJS eine zentrierte Skalierung auf der Leinwand aktivieren. Wenn in FabricJS ein Objekt aus einer Ecke gezogen wird, transformiert sich das Objekt proportional. Wir können die Eigenschaft „centeredScaling“ verwenden, um die Mitte als Ursprung der Transformation zu verwenden.

Syntax

new fabric.Canvas(element: HTMLElement|String, { centeredScaling: Boolean }: Object)

Parameter

Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Sie können diesen Parameter verwenden, um viele Attribute im Zusammenhang mit der Leinwand zu ändern, z. B. Farbe, Cursor und Rahmenbreite, darunter „centeredScaling“ als ein Attribut. Es akzeptiert einen booleschen Wert, der bestimmt, ob das Objekt den Mittelpunkt als Ursprung der Transformation verwenden soll. Der Standardwert ist False.

Beispiel 1

Übergabe des centeredScaling-Schlüssels mit dem Wert false

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Objekt skaliert, wenn centeredScaling auf False gesetzt ist.

<!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>Enabling centered scaling in canvas using FabricJS</h2>
   <p>Select the object and try to resize it by its corners. The object will scale non-uniformly from its center.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         centeredScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Beispiel 2

Übergabe des Schlüssels „centeredScaling“ an eine Klasse mit dem Wert „True“

Standardmäßig ist der Schlüssel „centeredScaling“ auf „False“ gesetzt. Daher müssen wir den Schlüssel an die Klasse übergeben und ihm einen realen Wert zuweisen, damit die Objekte ihren Mittelpunkt als Ursprung der Transformation verwenden können.

<!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>Enabling centered scaling in canvas using FabricJS</h2>
   <p>Here we have set <b>centeredScaling</b> to True. Select the object and try to resize it by its corners. The object will scale uniformly from its center. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         centeredScaling: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie aktiviere ich die zentrierte Skalierung auf der Leinwand mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie konvertiert man eine Zahl in JavaScript in ein Array?Nächster Artikel：Wie konvertiert man eine Zahl in JavaScript in ein Array?

In Verbindung stehende Artikel

Mehr sehen