Wie stelle ich mit FabricJS die Breite des Auswahlbereichsrandes auf der Leinwand ein?-js-Tutorial-php.cn

Wie stelle ich mit FabricJS die Breite des Auswahlbereichsrandes auf der Leinwand ein?

WBOY

Freigeben： 2023-09-03 14:53:11

nach vorne

1419 Leute haben es durchsucht

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

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.

Syntax

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

Nach dem Login kopieren

Parameter

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.

Beispiel 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>  <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>
Nach dem Login kopieren
例 Beispiel 2
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:
<!DOCTYPE html> <html> <head>  <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
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!