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.
new fabric.Polygon( points: Array, options: Object )
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.
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>
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>
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!