Heim >Web-Frontend >js-Tutorial >Fabric.js – So zeichnen Sie ein sechseckiges Gitter (Wabe) mit der Polygon-Klasse

Fabric.js – So zeichnen Sie ein sechseckiges Gitter (Wabe) mit der Polygon-Klasse

WBOYnach vorne: 2023-09-22 22:57:051392Durchsuche

Fabric.js – 如何使用 Polygon 类绘制六边形网格（蜂巢）

Wir können Polygonobjekte erstellen, indem wir Instanzen von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden.

Grammatik

new fabric.Polygon( points: Array, options: Object )

Parameter

points – Dieser Parameter akzeptiert ein Array, das das Array von Punkten darstellt, aus denen das Polygonobjekt besteht.
Optionen (optional) – Dieser Parameter ist ein Objekt , das für unsere Zwecke nützlich ist. Verwenden Sie diesen Parameter, um den Ursprung, die Strichstärke und viele andere Eigenschaften zu ändern, die mit dem Polygon-Objekt verknüpft sind.

Beispiel 1: Zeichnen Sie ein Sechseck aus Polygonen

Schauen wir uns ein Codebeispiel zum Zeichnen von Sechsecken mithilfe von Polygonen an. Wir können viele Arten von Sechsecken zeichnen, in diesem Beispiel zeichnen wir jedoch ein regelmäßiges Sechseck. Wir wissen, dass ein regelmäßiges Sechseck sechs gleiche Seiten hat.

<!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>Drawing a Hexagon using Polygon</h2>
   <p>You can see a hexagon object has been added to the canvas</p> 
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the angle of the hexagon
      const a = (2 * Math.PI) / 6;
      
      // Initiating the radius of the circle
      const r = 50;
      
      // Initiate a polygon object
      var hexagon = new fabric.Polygon(
         [
            { x: 50, y: 0 },
            { x: 25, y: 43.30},
            { x: -25, y: 43.301 },
            { x: -50, y: 0},
            { x: -25, y: -43.301},
            { x: 25, y: -43.301 },
         ],
         {
            stroke: "red",
            left: 140,
            top: 10,
            strokeWidth: 2,
            strokeLineJoin: "bevil",
         }
      );
      
      // Adding it to the canvas
      canvas.add(hexagon);
   </script>
</body>
</html>

Beispiel 2: Zeichnen eines sechseckigen Netzes mit Polygon

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man ein sechseckiges Gitter erstellt. Wir können einfach eine Funktion namens drawHexagon(m,n) starten, wobei (m,n) der Mittelpunkt des Sechsecks ist. Bei jedem Aufruf dieser Funktion wird ein Sechseck gezeichnet. Wir starten auch die Funktion drawGrid(width, height), die aufeinanderfolgende Sechsecke zeichnet, indem sie die Position des nächsten Mittelpunkts der aufeinanderfolgenden Sechsecke berechnet.

<!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>Drawing a Hexagonal grid using Polygon</h2>
   <p>You can see that a hexagonal grid has been drawn</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 polygon object
      function drawHexagon(left, top) {
         var hexagon = new fabric.Polygon(
            [
               { x: 50, y: 0 },
               { x: 25, y: 43.30},
               { x: -25, y: 43.301 },
               { x: -50, y: 0},
               { x: -25, y: -43.301},
               { x: 25, y: -43.301 },
            ],
            {
               stroke: "#EEC33D",
               fill: "#BB900C",
               strokeWidth: 5,
               left: left,
               top: top
            } 
         );

         // Adding it to the canvas
         canvas.add(hexagon);
      }

      // Initiating the drawGrid function
      function drawGrid() {
         for (let y = 1; y < 4; y++) {
            drawHexagon(80*y,45*y)
         }
         for (let y = 1; y < 4; y++) {
            drawHexagon(80*y+160,45*y)
         }
         for (let y = 1; y < 4; y++) {
            drawHexagon(80*y+320,45*y)
         }
      }

      // Calling drawGrid function
      drawGrid();
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mithilfe der Polygon-Klasse und FabricJS ein sechseckiges Gitter zeichnet.

Das obige ist der detaillierte Inhalt vonFabric.js – So zeichnen Sie ein sechseckiges Gitter (Wabe) mit der Polygon-Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Array JS 对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Der Unterschied zwischen lokalem Speicher, Sitzungsspeicher und Cookies in JavaScriptNächster Artikel：Der Unterschied zwischen lokalem Speicher, Sitzungsspeicher und Cookies in JavaScript

In Verbindung stehende Artikel

Mehr sehen