suchen

Heim >Web-Frontend >js-Tutorial >Wie stelle ich die Füllfarbe eines Rechtecks ​​mit FabricJS ein?

Wie stelle ich die Füllfarbe eines Rechtecks ​​mit FabricJS ein?

WBOY
WBOYnach vorne
2023-09-21 08:13:241332Durchsuche

如何使用 FabricJS 设置矩形的填充颜色？

In diesem Tutorial lernen wir, wie man das Aussehen eines Rechtecks ​​ändert Ändern Sie die Füllfarbe eines Objekts mithilfe von FabricJS. Ein Rechteck ist eine von vielen Formen Unterstützt von FabricJS. Um ein Rechteck zu erstellen, müssen wir eine Instanz erstellen Fabric.Rect-Klasse und fügen Sie sie der Leinwand hinzu.

Wir können die Füllfarbe mithilfe des Füllattributs ändern, das uns die Angabe ermöglicht Die Farbe der Objektfüllung.

Syntax

new fabric.Rect({ fill: String }: Object)

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das als Eigenschaft gefüllte Objekt beziehen.

Optionsschlüssel

  • fill – Diese Eigenschaft akzeptiert einen String, der es uns ermöglicht, die Füllfarbe des Objekts zu ändern. Der Standardwert ist rgb(0,0,0), also Schwarz.

Beispiel 1

Standardfüllfarbe eines rechteckigen Objekts

Schauen wir uns ein Codebeispiel an, das uns die Standardfüllfarbe eines rechteckigen Objekts zeigt FabricJS. Wenn wir beim Erstellen des Rechteckobjekts die Eigenschaft „fill“ vollständig überspringen, wird dies der Fall sein Beim Rendern ist die Füllfarbe Schwarz. 

<!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>Default fill colour of a rectangle object</h2>
   <p>You can click on the rectangle and interact with it</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Beispiel 2

Übergabe des Attributs fill als Schlüssel

Wir können dem Füllattribut auch einen beliebigen Farbnamen oder RGBA-Wert zuweisen. In diesem Beispiel, Wir haben ihm einen „Grau“-Wert gegeben 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>Passing the fill property as key</h2>
   <p>You can see the new fill colour of rectangle object</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
 
       // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         borderColor: "purple",
         borderScaleFactor: 3,
         fill: "grey",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich die Füllfarbe eines Rechtecks ​​mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String 对象 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 stelle ich die Deckkraft eines Rechtecks ​​mit FabricJS ein?Nächster Artikel：Wie stelle ich die Deckkraft eines Rechtecks ​​mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen