Wie kann ich mit FabricJS die Größe eines Objekts anhand der Ecken ungleichmäßig ändern?-js-Tutorial-php.cn

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

WBOY

Freigeben： 2023-08-25 10:13:07

nach vorne

1018 Leute haben es durchsucht

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

Nach dem Login kopieren

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>  <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>
Nach dem Login kopieren
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>  <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>
Nach dem Login kopieren
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!