Maison >interface Web >js tutoriel >Fabric.js – Comment dessiner une grille hexagonale (nid d'abeille) à l'aide de la classe Polygon

Fabric.js – Comment dessiner une grille hexagonale (nid d'abeille) à l'aide de la classe Polygon

WBOYavant: 2023-09-22 22:57:051429parcourir

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

Nous pouvons créer des objets Polygon en créant des instances de fabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc.

Grammaire

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

Paramètres

points - Ce paramètre accepte un Array qui représente le tableau de points qui composent l'objet polygone.
Options (facultatif) - Ce paramètre est un objet qui est utile pour nos besoins. Utilisez ce paramètre pour modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet Polygone.

Exemple 1 : Dessinez un hexagone à l'aide de polygones

Regardons un exemple de code sur la façon de dessiner des hexagones à l'aide de polygones. Nous pouvons dessiner de nombreux types d’hexagones, cependant, dans cet exemple, nous dessinerons un hexagone régulier. Nous savons qu’un hexagone régulier possède six côtés égaux.

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

Exemple 2 : Dessiner un maillage hexagonal à l'aide de Polygon

Regardons un exemple de code pour voir comment créer une grille hexagonale. On peut simplement lancer une fonction appelée drawHexagon(m,n), où (m,n) est le point central de l'hexagone. Chaque fois que cette fonction est appelée, un hexagone est dessiné. Nous démarrons également la fonction drawGrid(width, height), qui dessine des hexagones consécutifs en calculant la position du prochain centre des hexagones consécutifs.

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

Conclusion

Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment dessiner une grille hexagonale à l'aide de la classe Polygon à l'aide de FabricJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Array JS 对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：La différence entre le stockage local, le stockage de session et les cookies en JavaScriptArticle suivant：La différence entre le stockage local, le stockage de session et les cookies en JavaScript

Articles Liés

Voir plus