cari

Rumah  >  Artikel  >  hujung hadapan web  >  Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas Poligon

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

WBOY
WBOYke hadapan
2023-09-22 22:57:051388semak imbas

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 )

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>

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>

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!

Array JS 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Perbezaan antara storan tempatan, storan sesi dan kuki dalam JavaScriptArtikel seterusnya：Perbezaan antara storan tempatan, storan sesi dan kuki dalam JavaScript

Artikel berkaitan

Lihat lagi