Heim > Artikel > Web-Frontend > Wie kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?

Wie kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?

WBOYnach vorne: 2023-08-25 10:13:071051Durchsuche

如何使用 FabricJS 通过角点非均匀地调整对象大小？

In diesem Artikel erfahren Sie, wie Sie mithilfe von FabricJS die Größe von Objekten anhand der Ecken ungleichmäßig ändern. Wenn in FabricJS ein Objekt aus einer Ecke gezogen wird, transformiert sich das Objekt proportional. Wir können dieses Verhalten jedoch steuern, indem wir uniScaleKey drücken.

Syntax

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

Parameter

Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie viele Attribute im Zusammenhang mit der Leinwand ändern, z. B. Farbe, Cursor und Rahmenbreite, darunter uniScaleKey als ein Attribut. Es akzeptiert einen Zeichenfolgenwert, der angibt, welche Taste die einheitliche Skalierung umschaltet. Der Standardwert ist shiftKey. Mögliche Schlüsselwerte sind: altKey, Umschalttaste und Strgtaste.

Beispiel 1

Drücken Sie die Umschalttaste, um die einheitliche Skalierung zu deaktivieren.

Wenn ein Objekt durch Ziehen von Kanten unter Beibehaltung des Seitenverhältnisses transformiert wird, sagen wir, dass das Objekt einheitlich skaliert ist. Mit uniScaleKey können wir dieses Verhalten sofort steuern. Standardmäßig werden Objekte in FabricJS proportional skaliert. Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Objekt ungleichmäßig skaliert wird, wenn die Umschalttaste gedrückt wird.

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>shift</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // 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);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Beispiel 2

Ändern Sie den Wert von uniScaleKey in ctrlKey

Während der Standardwert

shiftKey ist, können wir auch die Werte verwenden: 'ctrlKey' und 'altKey'. Wenn NULL oder ein anderer Schlüssel angegeben wird, wird diese Funktion deaktiviert.

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>ctrl</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniScaleKey: "ctrlKey",
      });
      // 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);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

NULL 字符串对象

Stellungnahme：

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

Vorheriger Artikel：Erklären Sie, wie Timer in JavaScript funktionierenNächster Artikel：Erklären Sie, wie Timer in JavaScript funktionieren

In Verbindung stehende Artikel

Mehr sehen