Wie erstelle ich mit FabricJS ein Dreieck mit einem gestrichelten Musterrand?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS ein Dreieck mit einem gestrichelten Musterrand?

WBOY

Freigeben： 2023-08-23 18:37:02

nach vorne

1035 Leute haben es durchsucht

如何使用 FabricJS 创建带有虚线图案边框的三角形？

In diesem Tutorial erstellen wir mit FabricJS ein Dreieck mit einem gepunkteten Musterrand. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Wir können das Aussehen des Rahmenstrichs ändern, indem wir die Eigenschaft borderDashArray verwenden. Allerdings muss unser Dreiecksobjekt einen Rahmen haben, damit diese Eigenschaft funktioniert. Diese Eigenschaft hat keine Auswirkung, wenn für die Eigenschaft hasBorders ein falscher Wert angegeben wird.

Syntax

new fabric.Triangle({ borderDashArray: Array }: Object)

Nach dem Login kopieren

Parameter

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

Options Keys

borderDashArray – Diese Eigenschaft akzeptiert ein angegebener Bindestrich ArrayDeklarieren Sie das Intervallmuster durch ein Array.

Beispiel 1

Übergabe von borderDashArray als Schlüssel mit benutzerdefiniertem Wert

Sehen wir uns ein Codebeispiel an, das mithilfe der Eigenschaft borderDashArray in FabricJS einen gestrichelten Musterrahmen erstellt. In diesem Beispiel verwenden wir ein [7,10]-Array, das uns sagt, dass das Muster durch das Zeichnen einer 7 Pixel langen Linie, gefolgt von einer 10 Pixel langen Lücke und der immer wiederkehrenden Wiederholung dieses gleichen Musters 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 borderDashArray as key with a custom value</h2>
   <p>Select the triangle to see the dash pattern</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
      });

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

Nach dem Login kopieren

Beispiel 2

Übergabe des hasBorders-Schlüssels mit dem Wert „false“

Wie wir in diesem Beispiel sehen können, funktionieren sie nicht, obwohl wir den Eigenschaften borderColor und borderDashArray die richtigen Werte zugewiesen haben funktioniert, weil die Eigenschaft hasBorders auf false gesetzt wurde. Bei der Einstellung „False“ wird der Begrenzungsrahmen des Objekts nicht gerendert.

<!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 hasBorders key with the value "false"</h2>
   <p>Select the triangle and observe that its borders have not been rendered.</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: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "red",
         borderDashArray: [7, 10],
         hasBorders: false,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Dreieck mit einem gestrichelten Musterrand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!