In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den vertikalen Skalierungsfaktor einer Ellipse festlegen. 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. So wie wir die Position, Farbe, Deckkraft und Größe des Ellipsenobjekts innerhalb der Leinwand festlegen können, können wir auch die vertikale Skalierung des Ellipsenobjekts festlegen. Dies kann mit dem Attribut scaleY erfolgen.
new fabric.Ellipse({ scaleY : Number }: Object)
Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft scaleY ist.
scaleY – Diese Eigenschaft akzeptiert einen numerischen强> Wert. Der zugewiesene Wert bestimmt den vertikalen Objektskalierungsfaktor. Der Standardwert ist 1.
Standarddarstellung, wenn scaleY nicht verwendet wird
Das folgende Beispiel zeigt, wie eine Ellipse angezeigt wird, wenn das Attribut scaleY nicht verwendet wird. Standardmäßig haben Ellipsenobjekte einen vertikalen Skalierungsfaktor von 1. scaleY Bestimmt die Transformation, die die Größe des Objekts entlang der Y-Achse ändert.
<!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>Setting the vertical scale factor of an Ellipse using FabricJS</h2> <p>Note that here we haven't set the vertical scale factor <b>scaleY</b> explicitly. By default, it is set to 1. </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: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Übergabe des Attributs scaleY als Schlüssel
In diesem Beispiel übergeben wir das Attribut scaleY als Schlüssel mit dem Wert 2. Dies bedeutet, dass der Skalierungsfaktor des Ellipsenobjekts in vertikaler Richtung verdoppelt 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>Setting the vertical scale factor of an Ellipse using FabricJS</h2> <p>Here we have set <b>scaleY</b> to 2, so the vertical scale factor of the ellipse doubled. </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: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", scaleY: 2, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Das obige ist der detaillierte Inhalt vonWie stelle ich den vertikalen Skalierungsfaktor einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!