Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS den horizontalen und vertikalen Radius einer Ellipse ein?

Wie stelle ich mit FabricJS den horizontalen und vertikalen Radius einer Ellipse ein?

PHPznach vorne: 2023-09-12 09:25:02591Durchsuche

如何使用 FabricJS 设置椭圆的水平和垂直半径？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den horizontalen und vertikalen Radius 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. Wir können das Ellipsenobjekt anpassen, indem wir seine Position, Farbe, Deckkraft und Größe angeben. Die wichtigsten Eigenschaften sind jedoch rx und ry, mit denen wir die horizontalen und vertikalen Radien der Ellipse angeben können.

Syntax

new fabric.Ellipse({ rx : Number, ry: Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter ist es möglich, die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit Objekten mit den Eigenschaften rx und ry zu ändern.
li>

Optionsschlüssel

rx – Diese Eigenschaft akzeptiert einen numerischen Wert. Der zugewiesene Wert bestimmt den horizontalen Radius des Ellipsenobjekts.
ry – Diese Eigenschaft akzeptiert einen numerischen Wert. Der zugewiesene Wert bestimmt den vertikalen Radius des Ellipsenobjekts.

Beispiel 1Standarddarstellung, wenn

rx und ry nicht verwendet werden

Der folgende Code zeigt, wie ein Ellipsenobjekt angezeigt wird, wenn die Eigenschaften rx und ry nicht verwendet werden. In diesem Beispiel können wir sehen, dass wir eine Füllfarbe verwendet haben, um die Ellipse zu erkennen, die unsichtbar ist, weil wir ihr keinen horizontalen und vertikalen Radius zugewiesen haben.

<!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 horizontal and vertical radius of an Ellipse using FabricJS</h2>
      <p>Here we are getting a blank output because we have not assigned any horizontal and vertical radius.</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,
            fill: "red",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Übergeben der Attribute rx und ry als Schlüssel

In diesem Beispiel übergeben wir die Werte 100 und 70 an die Attribute rx bzw. ry. Unser Ellipsenobjekt hat also einen horizontalen Radius von 100 Pixeln und einen vertikalen Radius von 70 Pixeln.

<!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>How to set the horizontal and vertical radius of Ellipse using FabricJS?</h2>
      <p>Here we have supplied the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. Hence we are getting an ellipse of a definite dimension. </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: 100,
            ry: 70,
            fill: "red",
         });

         // 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 mit FabricJS den horizontalen und vertikalen Radius einer Ellipse ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

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

Vorheriger Artikel：JavaScript-Programm zum Generieren einer Matrix, deren Summe der Subdiagonalen einem perfekten Quadrat entsprichtNächster Artikel：JavaScript-Programm zum Generieren einer Matrix, deren Summe der Subdiagonalen einem perfekten Quadrat entspricht

In Verbindung stehende Artikel

Mehr sehen