In diesem Artikel erfahren Sie, wie Sie mit FabricJS einen Strich zum Rand eines Auswahlbereichs auf der Leinwand hinzufügen. Dies können wir erreichen, indem wir die SelectionDashArray-Eigenschaft verwenden. Damit können wir den Rand des Auswahlbereichs auf eine gestrichelte Linie setzen.
new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: 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 Attribute im Zusammenhang mit der Leinwand ändern, z. B. Farbe, Cursor und Rahmenbreite, darunter auch „selectionDashArray“ als ein Attribut. Es akzeptiert ein Array, das das gewünschte Strichmuster bestimmt.
Übergabe von SelectionDashArray als Schlüssel zur Klasse
selectionDashArray ermöglicht es uns, den Rand des Auswahlbereichs auf eine gepunktete Linie festzulegen. Um ein Strichmuster zu definieren, geben Sie die Länge der Striche in einem Array an. Im folgenden Beispiel nehmen wir das Array [7,6]. Das bedeutet, dass es eine 7 Pixel lange Linie gibt, gefolgt von einer 6 Pixel langen Lücke und so weiter.
<!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>Adding dashes to the border of a selection area on a canvas</h2>
<p>Select an area around the object. The border of the selection area would have dashed lines.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionDashArray: [7, 6],
selectionBorderColor: "red"
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Die Verwendung von „selectionDashArray“ mit „selectionLineWidth“ und „selectionBorderColor“
selectionDashArray-Eigenschaften können auf viele Arten verwendet werden. Eine Möglichkeit besteht darin, es in Verbindung mit „selectionLineWidth“ und „selectionBorderColor“ zu verwenden, die jeweils die Breite und die Farbe des Auswahlrahmens angeben.
<!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>Adding dashes to the border of a selection area on a canvas</h2>
<p>Select an area around the object and observe the outline of the selection area. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionDashArray: [13, 16],
selectionLineWidth: 5,
selectionBorderColor: "green",
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS einen Strich zum Rand eines Auswahlbereichs auf einer Leinwand hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
