Heim >Web-Frontend >js-Tutorial >Wie stelle ich den vertikalen Skalierungsfaktor einer Ellipse mit FabricJS ein?

Wie stelle ich den vertikalen Skalierungsfaktor einer Ellipse mit FabricJS ein?

PHPznach vorne: 2023-08-25 21:09:07615Durchsuche

如何使用 FabricJS 设置椭圆的垂直比例因子？

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.

Syntax

new fabric.Ellipse({ scaleY : Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, 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.

Optionsschlüssel

scaleY – Diese Eigenschaft akzeptiert einen numerischen强> Wert. Der zugewiesene Wert bestimmt den vertikalen Objektskalierungsfaktor. Der Standardwert ist 1.

Beispiel 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&#39;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>

Beispiel 2

Ü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!

Stellungnahme：

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

Vorheriger Artikel：Wie greife ich mit JavaScript auf ein Objekt zu, das Leerzeichen im Objektschlüssel enthält?Nächster Artikel：Wie greife ich mit JavaScript auf ein Objekt zu, das Leerzeichen im Objektschlüssel enthält?

In Verbindung stehende Artikel

Mehr sehen