suchen

Heim >Web-Frontend >js-Tutorial >Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?

Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?

PHPz
PHPznach vorne
2023-08-24 14:37:141369Durchsuche

Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?

In diesem Tutorial lernen wir, wie man das Aussehen eines Ellipse-Objekts ändert, indem man seine Füllfarbe mit FabricJS ändert. 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 die Füllfarbe mithilfe der Eigenschaft fill ändern, mit der wir die Füllfarbe eines Objekts festlegen können.

Syntax

new fabric.Ellipse({ fill: String }: 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 mit dem Objekt verknüpft sind, dessen Füllung die Eigenschaft ist.

Option Key

  • Padding – Diese Eigenschaft akzeptiert einen String Strong>-Wert, der es uns ermöglicht, die PaddingFarbe des Objekts zu ändern. Der Standardwert ist rgb(0,0,0), also Schwarz.

Beispiel 1

Standard PaddingFarbe des Ellipsenobjekts

Sehen wir uns einen Code an, der die Standardfüllfarbe des Ellipsenobjekts FabricJS zeigt. Wenn wir beim Erstellen des Ellipsenobjekts die Eigenschaft fill komplett überspringen, wird es schwarz gerendert. 

<!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 fill color of Ellipse using FabricJS?</h2>
      <p>Observe the ellipse is rendered black as we have not applied the <b>fill</b> property. This is the default fill color. </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: 215,
            top: 100,
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

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

Fill-Attribut als Schlüssel übergeben

Wir können dem

fill

-Attribut auch einen beliebigen Farbnamen oder RGBA-Wert zuweisen. In diesem Beispiel haben wir ihm den Wert „skyBlue“ zugewiesen und die Füllfarbe entsprechend geä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>How to set the fill color of Ellipse using FabricJS?</h2>
      <p>Here we have used the <b>fill</b> property and used skyBlue color.</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: 215,
            top: 100,
            fill: "skyBlue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // 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 die Füllfarbe einer Ellipse mit FabricJS 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：FabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?Nächster Artikel：FabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?

In Verbindung stehende Artikel

Mehr sehen