Wie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?

In diesem Tutorial erstellen wir mit FabricJs einen Kreis mit einerHintergrundfarbe. 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. Mit der Eigenschaft „backgroundColor“ können wir eine Farbe für den Hintergrund eines Objekts angeben. Es ist die Farbe des quadratischen Behälters (wo sich der Kreis befindet).Syntax

new fabric.Circle({ backgroundColor: String }: Object)

Parameter

• Optionen (optional)– Dieser Parameter ist einObjekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf den Kreis beziehen, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften, von denenbackgroundColor< /em> seine Eigenschaft ist.

Optionstaste

• backgroundColor– Diese Eigenschaft akzeptiert einenString, der die Farbe des Objekthintergrunds bestimmt. Der Wert kann ein Hexadezimalwert, ein RGBA-Wert oder einfach der Name der Farbe sein, die der Hintergrund haben soll.

Beispiel 1
Übergabe der Eigenschaft

backgroundColorals Schlüssel mit einem HexadezimalwertSehen wir uns ein Beispiel für die Zuweisung einer Hintergrundfarbe zu einem kreisförmigen Objekt mithilfe hexadezimaler Farbwerte an. In diesem Beispiel haben wir den Hex-Farbcode

#d0db61

verwendet, bei dem es sich um eine dunkle Khaki-Farbe handelt.

     
  
Creating a circle with a background colour using FabricJS
 
Notice the dark-khaki background around the circle. It appears as we have applied the backgroundColor property and assigned it a Hex color code. 
    

Nach dem Login kopieren
Beispiel 2
Übergabe des Attributs

backgroundColorals Schlüssel mit RGBA-WertWir können

RGBA

(Rot, Blau, Grün und Alpha)-Werte anstelle von Hex-Farbcodes verwenden. Der Alpha-Parameter gibt die Deckkraft der Farbe an. In diesem Beispiel haben wir denrgba-Wert (255,0,0,0,7)verwendet, der rot ist und eine Deckkraft von 0,7 hat.

     
  
Creating a circle with a background colour using FabricJS
 
Notice the orange-red background around the circle. Here we have used the backgroundColor property and assigned it an 'rgba' value. 
    

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!