Wie stelle ich mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand ein?

王林

Freigeben： 2023-09-10 21:53:09

nach vorne

1379 Leute haben es durchsucht

如何使用 FabricJS 设置画布上选择区域的颜色？

In diesem Artikel erfahren Sie, wie Sie mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand festlegen. Wir können die Farbe mithilfe der Eigenschaft „selectionColor“ anpassen.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionColor: String }: Object)

Nach dem Login kopieren

Parameter

Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mithilfe dieses Parameters ist es möglich, Eigenschaften im Zusammenhang mit der Leinwand zu ändern, z. B. Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften, wobei „selectionColor“ die Eigenschaft ist, mit der wir die Farbe der Auswahl angeben können. Der Standardwert von SelectionColor ist rgba(100,100,255,0,3).

Beispiel 1

Übergabe des Schlüssels „selectionColor“ an die Klasse

Die Eigenschaft „selectionColor“ akzeptiert eine Zeichenfolge, die die Farbe der Auswahl bestimmt. Wir können RGBA-Werte verwenden, die für Rot, Blau, Grün und Alpha stehen. Der Alpha-Parameter gibt die Deckkraft der Farbe an. Schauen wir uns ein Codebeispiel an, um zu sehen, wie man mit FabricJS die Farbe einer Auswahl in einer Leinwand festlegt.

<!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>Setting the color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "rgba(0,0,0,0.4)",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Verwendung von Farbnamen anstelle von RGBA-Werten

Wir können auch bestimmte Farben anstelle von RGBA-Werten verwenden. In diesem Beispiel wurde die Eigenschaft „selectionColor“ auf die Farbe „rot“ festgelegt.

<!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>Setting the color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "red",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Nach dem Login kopieren

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