Heim > Artikel > Web-Frontend > Wie füge ich mit FabricJS einen gestrichelten Strich zu einem Dreieck hinzu?

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

WBOYnach vorne: 2023-08-24 18:45:081129Durchsuche

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

In diesem Tutorial lernen wir, wie man mit FabricJS einen gestrichelten Strich zu einem Dreieck hinzufügt. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Klasse fabric.Triangle 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.Triangle( { strokeDashArray: Array }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft StrokeDashArray ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Option Key

Stroke DashArray – Diese Eigenschaft akzeptiert ein array, mit dem wir das gestrichelte Muster der Striche des Objekts angeben können. 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

Standarddarstellung von Objektstrichen

Sehen wir uns ein Codebeispiel an, das die Standarddarstellung von Dreiecksobjektstrichen 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&#39;s stroke</h2>
   <p>You can see there is no dash pattern in the stroke</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 triangle object
      var triangle = new fabric.Triangle({
         left: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
      });

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

Beispiel 2

Übergabe der StrikeDashArray-Eigenschaft als Schlüssel

In diesem Beispiel übergeben wir einen Wert von [9,2] an die StrokeDashArray-Eigenschaft. Das bedeutet, dass ein gestricheltes Muster mit einer 9 Pixel langen Linie, gefolgt von einer 2 Pixel langen Lücke, dann erneut einer 9 Pixel langen Linie usw. erstellt wird.

<!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 there is a dash pattern in the stroke now</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 triangle object
      var triangle = new fabric.Triangle({
         left: 150,
         top: 30,
         width: 90,
         height: 80,
         fill: "#b0e0e6",
         stroke: "#5f9ea0",
         strokeWidth: 7,
         strokeDashArray: [9, 2],
      });

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

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS einen gestrichelten Strich zu einem Dreieck 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：Greifen Sie auf Elemente im Typoskript zuNächster Artikel：Greifen Sie auf Elemente im Typoskript zu

In Verbindung stehende Artikel

Mehr sehen