Wie stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?-js-Tutorial-php.cn

Wie stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?

WBOY

Freigeben： 2023-09-01 10:57:07

nach vorne

1349 Leute haben es durchsucht

Wie stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den vertikalen Skalierungsfaktor eines Kreises festlegen. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. So wie wir die Position, Farbe, Deckkraft und Größe eines kreisförmigen Objekts innerhalb der Leinwand festlegen können, können wir auch die vertikale Skalierung des kreisförmigen Objekts festlegen. Dies kann mit dem Attribut scaleY erfolgen.

Syntax

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

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserem Kreis zusätzliche Anpassungen ermöglicht. Mithilfe dieses Parameters können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften im Zusammenhang mit dem Objekt mit dem Attribut „scaleY“ ändern.

Optionsschlüssel

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

Beispiel 1

Standarddarstellung, wenn ScaleY nicht verwendet wird

Sehen wir uns ein Beispiel an, das das Erscheinungsbild eines kreisförmigen Objekts zeigt, wenn das Attribut scaleY nicht verwendet wird. Standardmäßig haben kreisförmige Objekte 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 a Circle using FabricJS</h2>
      <p>Notice the vertical scale factor of the circle. Here we have not used the <b>scaleY</b> property, but by default, it is set to 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 7,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe der scaleY-Eigenschaft als Schlüssel

In diesem Beispiel übergeben wir die
scaleY-Eigenschaft als Schlüssel mit dem Wert 2. Dies bedeutet, dass der Skalierungsfaktor kreisförmiger Objekte in vertikaler Richtung verdoppelt wird.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the vertical scale factor of a Circle using FabricJS</h2> <p>Notice the vertical scale factor of the circle. Here we have set <b>scaleY</b> at 2, so the object appears elongated on the Y-axis. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, padding: 7, radius: 50, fill: "#85bb65", scaleY: 2 }); 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 stelle ich den vertikalen Skalierungsfaktor eines Kreises mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!