Wie deaktiviere ich die zentrierte Skalierung von Ellipse mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich die zentrierte Skalierung von Ellipse mit FabricJS?

王林

Freigeben： 2023-09-17 09:25:02

nach vorne

1135 Leute haben es durchsucht

如何使用 FabricJS 禁用 Ellipse 的居中缩放？

In diesem Tutorial erfahren Sie, wie Sie den Centered Zoom von Ellipse mithilfe von FabricJS deaktivieren. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, müssen wir eine Instanz der Fabric.Ellipse-Klasse erstellen und sie der Leinwand hinzufügen. Wenn Sie über ein Steuerelement skalieren, weisen Sie der Eigenschaft „centeredScaling“ den Wert „true“ zu, um die Mitte als Transformationsursprung des Objekts zu verwenden. Syntax

new fabric.Ellipse({ centeredScaling: Boolean }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des Objekts im Zusammenhang mit dem Attribut centeredScaling< /em> ändern.

Optionsschlüssel

centeredScaling – Diese Eigenschaft akzeptiert einen boolean Wert. Wenn diese Eigenschaft True ist, verwendet das Objekt den Mittelpunkt als Transformationsursprung.

Beispiel 1

centeredScaling als Schlüssel übergeben und ihm einen „wahren“ Wert zuweisen Das folgende Beispiel zeigt, wie sich ein Ellipsenobjekt verhält, wenn die Eigenschaft
centeredScaling
aktiviert ist. Wenn wir ein Objekt vergrößern, ist der Ursprung der Transformation der Mittelpunkt der Ellipse.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. The ellipse will scale up from its center. This is the default behavior.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, fill: "white", rx: 90, ry: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", centeredScaling: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Nach dem Login kopieren
Beispiel 2
Deaktivieren des Attributs „centeredScaling“
Wir können das Attribut
centeredScaling
deaktivieren, indem wir ihm den Wert „false“ zuweisen. Dadurch wird der Mittelpunkt der Ellipse nicht mehr als Mittelpunkt der Transformation verwendet. Hier ist ein Code zur Demonstration -
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>How to disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as False. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 215, top: 100, fill: "", rx: 90, ry: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#daa520", centeredScaling: false, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die zentrierte Skalierung von Ellipse mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!