Wie füge ich mit FabricJS einen gestrichelten Strich zu einem Rechteck hinzu?-js-Tutorial-php.cn

Wie füge ich mit FabricJS einen gestrichelten Strich zu einem Rechteck hinzu?

WBOY

Freigeben： 2023-08-25 12:29:09

nach vorne

990 Leute haben es durchsucht

如何使用 FabricJS 向矩形添加虚线描边？

In diesem Tutorial lernen wir, wie man mit FabricJS einen gestrichelten Strich zu einem Rechteck hinzufügt. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft StrokeDashArray können wir ein Strichmuster für die Striche des Objekts angeben.

Syntax

new fabric.Rect( { strokeDashArray: Array }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt , das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, das eine Eigenschaft von StrokeDashArray ist.

Optionstasten

StrokeDashArray – Mit dieser Eigenschaft können wir ein Strichmuster für den Strich des Objekts angeben. Wir können dies tun, indem wir ihm ein Array übergeben. Wenn wir beispielsweise ein Array mit den Werten [2,3] übergeben, stellt es ein Strichmuster aus 2 Pixel-Strichen und 3 Pixel-Lücken dar, und dieses Muster wiederholt sich unendlich.

Beispiel 1

Standardaussehen von Objektstrichen

Sehen wir uns ein Codebeispiel an, das das Standardaussehen eines rechteckigen Objektstrichs beschreibt. Da wir das Attribut StrokeDashArray nicht verwenden, wird das Strichmuster nicht angezeigt.

<!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>Default appearance of an object&rsquo;s stroke</h2>
   <p>You can see that there is no dashed stroke on the rectangle</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#2a52be",
         strokeWidth: 7,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergabe der Eigenschaft StrokeDashArray als Schlüssel

In diesem Beispiel übergeben wir einen Wert von [9,2] an die Eigenschaft StrokeDashArray. Das bedeutet, dass ein gestricheltes Muster mit einer 9 Pixel langen Linie erstellt wird, gefolgt von einer 2 Pixel langen Lücke, dann wird wiederum eine 9 Pixel lange Linie gezeichnet 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>Passing strokeDashArray property as key</h2>
   <p>You can see now a dashed stroke has been added around the rectangle</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#2a52be",
         strokeWidth: 7,
         strokeDashArray: [9, 2],
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS einen gestrichelten Strich zu einem Rechteck hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!