Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS die Breite des Auswahlbereichsrandes auf der Leinwand ein?

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

WBOYnach vorne: 2023-09-03 14:53:111421Durchsuche

如何使用 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)

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>
   <!-- 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>

例 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>
   <!-- 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>

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erstellen Sie ein Content-Management-System: nodePressNächster Artikel：Erstellen Sie ein Content-Management-System: nodePress

In Verbindung stehende Artikel

Mehr sehen