Bagaimanakah poligon berbeza daripada polyline dalam FabricJS?-tutorial js-php.cn

Bagaimanakah poligon berbeza daripada polyline dalam FabricJS?

王林

Lepaskan： 2023-08-27 08:21:17

ke hadapan

1164 orang telah melayarinya

FabricJS 中的多边形与折线有何不同？

Kita boleh mencipta objek Polyline dengan mencipta tika fabric.Polyline, manakala fabric.Polygon boleh digunakan untuk mencipta tika Polygon. Objek polyline boleh diwakili oleh satu set segmen garis lurus yang disambungkan. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb.

Polygon sentiasa menyambungkan titik pertama ke titik terakhir untuk membentuk kawasan tertutup, manakala polylines tidak. Ini boleh ditunjukkan melalui contoh yang diberikan di bawah.

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 polyline.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek kami. Gunakan parameter ini untuk menukar asal, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek Polyline.

Contoh 1

Buat contoh Fabric.Polyline() dan tambahkannya pada kanvas

Mari kita lihat contoh kod untuk melihat cara menambahkan objek polyline pada kanvas. Satu-satunya parameter yang diperlukan ialah tatasusunan points, manakala parameter kedua ialah objek options pilihan. Selain itu, kami akan menggunakan tatasusunan titik yang sama dalam Poligon untuk menunjukkan perbezaannya.

<!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 the polyline object doesn’t connects start to end</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 points array
      var points = [
         { x: 200, y: 150 },
         { x: 0, y: 100 },
         { x: 100, y: 0 },
         { x: 200, y: 100 },
      ];
      
      // Initiating a polyline object
      var polyline = new fabric.Polyline(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Buat contoh fabrik.Polygon() dan tambahkannya pada kanvas kami

Mari lihat contoh kod untuk melihat cara menambah objek poligon pada kanvas. Satu-satunya parameter yang diperlukan ialah tatasusunan points, manakala parameter kedua ialah objek pilihan pilihan, kami akan menyediakan objek pilihan yang sama seperti dalam contoh polyline.

<!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 canva</h2>
   <p>You can see that the polygon object connects start to end to make a closed area</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 points array
      var points = [
         { x: 200, y: 150 },
         { x: 0, y: 100 },
         { x: 100, y: 0 },
         { x: 200, y: 100 },
      ];
      
      // Initiating a polyline object
      var polygon = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah poligon berbeza daripada polyline dalam FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!