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

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

WBOY

Freigeben： 2023-09-22 22:57:05

nach vorne

1396 Leute haben es durchsucht

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 )

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!