Bagaimana untuk membuat poligon dengan polylines menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat poligon dengan polylines menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-31 17:49:08

ke hadapan

1053 orang telah melayarinya

如何使用 FabricJS 创建带有折线的多边形？

Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.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. Memandangkan Poligon memanjangkan fabric.Polyline, kita boleh mencipta tika poligon menggunakan polyline dengan cemerlang.

Tatabahasa

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

Salin selepas log masuk

Parameter

points − Parameter ini menerima Array yang mewakili tatasusunan titik yang membentuk objek poligon, di mana setiap titik terletak dalam objek dengan x dan y.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada objek kami. Gunakan parameter ini untuk menukar asalan, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek Poligon.

Contoh 1: Buat contoh Fabric.Polygon() dan tambahkannya pada kanvas

Mari kita lihat contoh kod cara membuat poligon dengan mencipta contoh fabric.Polygon. Memandangkan kelas Poligon memanjangkan fabric.Polyline, ia mewarisi sifat dan kaedahnya, sekali gus mewujudkan hubungan antara mereka.

<!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>
      Creating an instance of fabric.Polygon() and adding it to our canvas
   </h2> 
   <p>You can see that a Polygon 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 a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Buat contoh Fabric.Polyline() dan tambahkannya pada kanvas

Mari kita lihat contoh kod cara membuat poligon dengan mencipta contoh fabric.Polyline. Kita perlu menentukan tatasusunan yang mengandungi koordinat x dan y poligon yang ingin kita cipta dan menambah sebarang sifat pilihan untuk dimasukkan ke dalam objek pilihan. Dalam contoh ini, kita mencipta segi empat sama, iaitu poligon dengan empat sisi yang sama dan empat sudut 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>
      Creating an instance of fabric.Polyline() and adding it to our canvas
   </h2>
   <p>You can see that a Polygon 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 a polyline object
      var polygon = new fabric.Polyline(
         [
            { x: 0, y: 0 },
            { x: 50, y: 0 },
            { x: 50, y: 50 },
            { x: 0, y: 50 },
         ],
         {
            top: 50,
            left: 50,
            fill: "green",
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara mencipta poligon dengan polylines menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk membuat poligon dengan polylines menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!