Wie aktiviere ich die zentrierte Skalierung auf der Leinwand mit FabricJS?-js-Tutorial-php.cn

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

王林

Freigeben： 2023-08-29 13:29:02

nach vorne

949 Leute haben es durchsucht

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

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