Fabric.js – How to draw a hexagonal grid (honeycomb) using the Polygon class-JS Tutorial-php.cn

Fabric.js – How to draw a hexagonal grid (honeycomb) using the Polygon class

WBOY

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

forward

1401 people have browsed it

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

We can create Polygon objects by creating instances of fabric.Polygon. A polygon object can be characterized as any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc.

grammar

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

Copy after login

parameter

#points - This parameter accepts an Array, which represents the array of points that make up the polygon object.
Options (optional) - This parameter is an object , which is useful for our purposes. Use this parameter to change the origin, stroke width, and many other properties associated with the Polygon object.

Example 1: Drawing a hexagon using polygons

Let's look at a code example of how to draw a hexagon using polygons. We can draw many types of hexagons, however, in this example we will draw a regular hexagon. We know that a regular hexagon has six equal sides.

<!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>

Copy after login

Example 2: Drawing a hexagonal mesh using Polygon

Let's look at a code example to see how to create a hexagonal grid. We can simply launch a function called drawHexagon(m,n), where (m,n) is the center point of the hexagon. Whenever this function is called, a hexagon is drawn. We also start the drawGrid(width, height) function, which draws consecutive hexagons by calculating the position of the next center of the consecutive hexagons.

<!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>

Copy after login

in conclusion

In this tutorial, we use two simple examples to demonstrate how to draw a hexagonal grid using the Polygon class using FabricJS.

The above is the detailed content of Fabric.js – How to draw a hexagonal grid (honeycomb) using the Polygon class. For more information, please follow other related articles on the PHP Chinese website!