Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS die Rahmenfarbe eines Auswahlbereichs auf der Leinwand ein?
Wie stelle ich mit FabricJS die Rahmenfarbe eines Auswahlbereichs auf der Leinwand ein?
- WBOYnach vorne
- 2023-09-07 14:41:08737Durchsuche
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)Parameter
Element – Dieser Parameter ist das 5ba626b379994d53f7acf72a64f9b697-Element selbst und kann aus der ID des Elements selbst mithilfe von document.getElementById() oder eac62c65044c6b92e64435ea3e7699d7. 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>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>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!