Heim >Web-Frontend >js-Tutorial >Wie füge ich mit FabricJS einen Strich zum Rand eines Auswahlbereichs auf einer Leinwand hinzu?

Wie füge ich mit FabricJS einen Strich zum Rand eines Auswahlbereichs auf einer Leinwand hinzu?

PHPznach vorne: 2023-09-06 18:25:02675Durchsuche

如何使用 FabricJS 将破折号添加到画布上选择区域的边框？

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.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: 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 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.

Beispiel 1

Übergabe von SelectionDashArray als Schlüssel zur Klasse strong>

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>

Beispiel 2

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!

对象

Stellungnahme：

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

Vorheriger Artikel：Wie finde ich die Originalgröße eines Bildes mit FabricJS?Nächster Artikel：Wie finde ich die Originalgröße eines Bildes mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen