Wie füge ich mit FabricJS einen Strich zum Rand eines Auswahlbereichs auf einer Leinwand hinzu?-js-Tutorial-php.cn

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

PHPz

Freigeben： 2023-09-06 18:25:02

nach vorne

668 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!