Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?-js-Tutorial-php.cn

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

PHPz

Freigeben： 2023-08-24 14:37:14

nach vorne

1368 Leute haben es durchsucht

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)

Nach dem Login kopieren

Parameter

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

Nach dem Login kopieren

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>  <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>
Nach dem Login kopieren
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!