Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas Poligon-tutorial js-php.cn

Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas Poligon

WBOY

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

ke hadapan

1391 orang telah melayarinya

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

Kita boleh mencipta objek Poligon dengan mencipta contoh fabrik.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb.

Tatabahasa

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

Salin selepas log masuk

Parameter

points - Parameter ini menerima Array yang mewakili tatasusunan titik yang membentuk objek poligon.
Pilihan (pilihan) - Parameter ini ialah objek yang berguna untuk tujuan kita. Gunakan parameter ini untuk menukar asalan, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek Poligon.

Contoh 1: Lukis heksagon menggunakan poligon

Mari kita lihat contoh kod tentang cara melukis heksagon menggunakan poligon. Kita boleh melukis banyak jenis heksagon, bagaimanapun, dalam contoh ini kita akan melukis heksagon biasa. Kita tahu bahawa heksagon sekata mempunyai enam sisi yang sama.

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

Salin selepas log masuk

Contoh 2: Melukis jejaring heksagon menggunakan Poligon

Mari lihat contoh kod untuk melihat cara membuat grid heksagon. Kita hanya boleh melancarkan fungsi yang dipanggil drawHexagon(m,n), dengan (m,n) ialah titik tengah heksagon. Setiap kali fungsi ini dipanggil, heksagon dilukis. Kami juga memulakan fungsi drawGrid(lebar, tinggi), yang melukis heksagon berturut-turut dengan mengira kedudukan pusat seterusnya heksagon berturut-turut.

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

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara melukis grid heksagon menggunakan kelas Poligon menggunakan FabricJS.

Atas ialah kandungan terperinci Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas Poligon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!