Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand ein?
Wie stelle ich mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand ein?
- 王林nach vorne
- 2023-09-10 21:53:091348Durchsuche
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)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>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>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!