Heim >Web-Frontend >js-Tutorial >Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS?

Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS?

WBOYnach vorne: 2023-09-03 20:57:08975Durchsuche

如何使用 FabricJS 禁用画布中的统一缩放？

In diesem Artikel erfahren Sie, wie Sie die einheitliche Skalierung im Canvas mithilfe von FabricJS deaktivieren. Wenn in FabricJS ein Objekt aus einer Ecke gezogen wird, transformiert sich das Objekt proportional. Wir können dieses Verhalten jedoch mithilfe des Attributs „uniformScaling“ deaktivieren. Syntax

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

Parameter

Element – Dieser Parameter ist das -Element selbst, das mit document.getElementById()
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie Canvas-bezogene Eigenschaften wie Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften ändern, von denen uniformScaling eine Eigenschaft ist. Es akzeptiert einen booleschen Wert, der bestimmt, ob das Objekt proportional skaliert werden soll. Der Standardwert ist True.

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Objekt ungleichmäßig skaliert, wenn

uniformScaling

auf False gesetzt ist. Ab FabricJS Version 4 wurde die Eigenschaft uniScaleTransform entfernt und durch uniformScaling ersetzt.

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
      // UniformScaling is disabled
         uniformScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Ausgabe

Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS? Beispiel: Übergeben Sie den uniformScaling-Schlüssel an die Klasse mit dem Wert True

Da wir nun verstanden haben, wie ungleichmäßig skaliert wird, wenn uniformScaling False ist, können wir uniformScaling aktivieren, um dies zu vermeiden. Mal sehen, wie der Code aussieht –

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // UniformScaling is enabled
      uniformScaling: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Ausgabe

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die einheitliche Skalierung im Canvas 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：Überprüfen Sie, ob eine Zeichenfolge in JavaScript ein Palindrom sein kannNächster Artikel：Überprüfen Sie, ob eine Zeichenfolge in JavaScript ein Palindrom sein kann

In Verbindung stehende Artikel

Mehr sehen