In diesem Artikel erfahren Sie, wie Sie mit FabricJS die Breite des Auswahlbereichsrandes auf der Leinwand festlegen. Der Auswahlbereich stellt den mit der Maus ausgewählten Bereich dar und alle Objekte unter diesem Bereich werden ausgewählt. Mit FabricJS können wir die Breite des Auswahlbereichsrands mithilfe der Eigenschaft „selectionLineWidth“ anpassen.
new fabric.Canvas(element: HTMLElement|String, { selectionLineWidth: Number }: Object)Element – Dieser Parameter ist das
Optionen (optional) – Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung unserer Leinwand ermöglicht. Mit diesem Parameter können Sie viele Eigenschaften im Zusammenhang mit der Leinwand ändern, z. B. Farbe, Cursor und Rahmenbreite, darunter auch „selectionLineWidth“. Es akzeptiert eine Zahl, die die Breite der im Auswahlrahmen verwendeten Linie bestimmt. Der Standardwert ist 1.
Übergabe des Schlüssels „selectionLineWidth“ an die Klasse
Sehen wir uns ein Codebeispiel an, wie man die Breite des Auswahlbereichsrands im Canvas mit FabricJS festlegt. Der Parameter SelectionLineWidth akzeptiert eine Zahl als Wert. Je größer die von uns eingestellte Zahl, desto breiter wird der Rand des Leinwandbereichs.
<!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 width of the selection area border in canvas using FabricJs</h2>
<p>Select an area around the object to see the width of the selection area border.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionLineWidth: 23,
});
// 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> kombiniert SELECTIONLINEWIDTH und SelectionColor und SelectionBorderColor. Sie ermöglichen es uns, die Farbe des ausgewählten Bereichs separat festzulegen und die Rahmenfarbe des ausgewählten Bereichs anzupassen. Mal sehen, wie der Code aussieht: Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Breite des Auswahlbereichsrandes auf der Leinwand ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!<!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 width of selection area border in canvas using Fabric</h2>
<p>Select an area around the object to see the selection color and selection border color.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionLineWidth: 3,
selectionColor: "rgba(42,82,190,0.3)",
selectionBorderColor: "black",
});
// 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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
