Heim > Artikel > Web-Frontend > Wie lege ich die Hintergrundfarbe einer Rechteckauswahl mit FabricJS fest?

Wie lege ich die Hintergrundfarbe einer Rechteckauswahl mit FabricJS fest?

PHPznach vorne: 2023-08-27 14:49:151268Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Hintergrundfarbe einer rechteckigen Auswahl festlegen. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen.

Wir können die Größe des Objekts ändern, es drehen oder es bearbeiten, wenn es aktiv ausgewählt ist. Wir können die Eigenschaft selectionBackgroundColor verwenden, um die Hintergrundfarbe der rechteckigen Auswahl zu ändern.

Syntax

new fabric.Rect({ selectionBackgroundColor : 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 Objekt beziehen, für das die Hintergrundfarbe als Attribut ausgewählt ist.

OptionKey

selectionBackgroundColor – Diese Eigenschaft akzeptiert einen String-Wert. Der zugewiesene Wert bestimmt die Hintergrundfarbe der Auswahl.

Beispiel 1

Standardfarbe, wenn die SelectionBackgroundColor-Eigenschaft nicht verwendet wird

Sehen wir uns ein Codebeispiel an, um zu sehen, wie die Auswahl angezeigt wird, wenn die selectionBackgroundColor-Eigenschaft nicht verwendet wird. Anhand dieses Beispiels können wir erkennen, dass der Auswahlbereich bzw. der Bereich hinter dem Objekt keine Farbe hat.

<!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 colour when selectionBackgroundColor property is not used</h2>
   <p>You can click on the rectangle to see that the selection area has no colour</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: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Beispiel 2

Übergabe der SelectionBackgroundColor-Eigenschaft als Schlüssel

In diesem Beispiel weisen wir selectionBackgroundColor eine Werteigenschaft zu. In diesem Fall haben wir ihm den Hexadezimalwert „#e0ffff“ übergeben, der helles Cyan ist, sodass der Auswahlbereich in dieser Farbe aussieht.

<!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 selectionBackgroundColor property as key</h2>
   <p>You can click on the rectangle to see that the selection area now has a light cyan colour</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: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
         selectionBackgroundColor: "#e0ffff",
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie lege ich die Hintergrundfarbe einer Rechteckauswahl mit FabricJS fest?. 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 füge ich mit JavaScript Daten an ein Element hinzu?Nächster Artikel：Wie füge ich mit JavaScript Daten an ein Element hinzu?

In Verbindung stehende Artikel

Mehr sehen