Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit einer Ellipse?

Wie erstelle ich mit FabricJS eine Leinwand mit einer Ellipse?

WBOYnach vorne: 2023-09-12 23:05:021295Durchsuche

如何使用 FabricJS 创建带有椭圆的画布？

In diesem Tutorial lernen wir, wie man mit FabricJS eine Leinwand mit Ellipse-Objekten erstellt. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, erstellen wir eine Instanz der Fabric.Ellipse-Klasse und fügen sie der Leinwand hinzu.

Syntax

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

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit dem Ellipsenobjekt zu ändern, wobei rx und ry Eigenschaften des Ellipsenobjekts sind.

Optionstaste

rx – Diese Eigenschaft akzeptiert eine Zahl, die den horizontalen Radius der Ellipse bestimmt. Wenn wir keinen horizontalen Radius angeben, wird die Ellipse nicht auf der Leinwand angezeigt.
ry – Diese Eigenschaft akzeptiert eine Zahl, die den vertikalen Radius der Ellipse bestimmt. Wenn wir keinen vertikalen Radius angeben, wird die Ellipse nicht auf der Leinwand angezeigt.

Beispiel 1

Erstellen Sie eine Instanz von Fabric.Ellipse() und fügen Sie sie unserer Leinwand hinzu.

Sehen wir uns ein Beispiel an, wie man einer Leinwand eine Ellipse hinzufügt. Hier erstellen wir ein Objekt mit einem horizontalen Radius von 80 Pixeln und einem vertikalen Radius von 50 Pixeln. Wir verwenden Himmelblau, um das Objekt mit dem Hex-Wert zu füllen #87ceeb.

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have created an ellipse object and set it over a canvas.</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: 100,
            fill: "#87ceeb",
            rx: 80,
            ry: 50,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Verwenden der Set-Methode zum Bearbeiten eines Ellipsenobjekts

In diesem Beispiel verwenden wir die set-Methode, die ein Setter für Werte ist. Alle Eigenschaften im Zusammenhang mit Strich, Strichbreite, Radius, Skalierung, Drehung usw. können mit dieser Methode geändert werden.

<!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 create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have used the <b>set</b> method to create an ellipse object over the canvas. </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();
         
         // Using set to set the properties
         ellipse.set("rx", 90);
         ellipse.set("ry", 40);
         ellipse.set("fill", "#1e90ff");
         ellipse.set({
            stroke: "rgba(245,199,246,0.5)",
            strokeWidth: 6
         });
         ellipse.set("left", 150);
         ellipse.set("top", 90);
         
         // 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 erstelle ich mit FabricJS eine Leinwand mit einer Ellipse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 li fabric

Stellungnahme：

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

Vorheriger Artikel：Wie importiere ich SVG-Dateien in JavaScript?Nächster Artikel：Wie importiere ich SVG-Dateien in JavaScript?

In Verbindung stehende Artikel

Mehr sehen