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

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

WBOY

Freigeben： 2023-09-07 14:41:08

nach vorne

773 Leute haben es durchsucht

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

In diesem Artikel erfahren Sie, wie Sie mit FabricJS die Rahmenfarbe eines Auswahlbereichs auf der Leinwand festlegen. Eine Auswahl, die angibt, ob die Gruppenauswahl aktiviert werden soll. Mit FabricJS können wir die Rahmenfarbe mithilfe der SelectionBorderColor-Eigenschaft entsprechend anpassen.

Syntax

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

Nach dem Login kopieren

Parameter

Element – Dieser Parameter ist das -Element selbst und kann aus der ID des Elements selbst mithilfe von document.getElementById() oder < abgeleitet werden. Leinwand>. Der FabricJS-Canvas wird auf diesem Element initialisiert.
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie die Eigenschaften der Leinwand ändern, z. B. Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften, darunter „selectionBorderColor“ als Eigenschaft, mit der wir die Farbe des Auswahlrahmens angeben können. Der Standardwert der SelectionBorderColor-Eigenschaft ist rgba(255,255,255,0.3).

Beispiel 1

Verwenden Sie den Farbnamen, um die Farbe des Auswahlbereichs festzulegen. Die Eigenschaft „selectionBorderColor“ akzeptiert eine Zeichenfolge, die die Farbe des Auswahlrahmens bestimmt. Die Farbe ist normalerweise dunkler als die Auswahl selbst. Schauen wir uns ein Codebeispiel an, um zu sehen, wie man mit FabricJS die Rahmenfarbe eines Auswahlbereichs 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 border color of a selection area on a canvas</h2>
   <p>Select an area around the object. You will notice that the border color of the selection would be red in color. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionBorderColor: "green",
      });
      // 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 RGBA-Werten als Auswahlbereichsfarbe

Wir können auch „RGBA“-Werte verwenden, wobei „a“ für „Alpha“ steht, was für Opazität steht. In diesem Beispiel haben wir Kastanienbraun mit einem „rgba“-Wert von (112,0,0) und 0,9 für die Deckkraft verwendet.

<!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 border colour of selection area using FabricJs</h2>
   <p>Select an area around the object to see the border color of the selection area. Here we have used "rgba" value to set the border color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionBorderColor: "rgba(112,0,0,0.9)",
      });
      // 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 Rahmenfarbe eines Auswahlbereichs auf der Leinwand ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!