Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die einheitliche Skalierung im Canvas mit FabricJS?

WBOY

Freigeben： 2023-09-03 20:57:08

nach vorne

895 Leute haben es durchsucht

如何使用 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)

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!