Bagaimana untuk menambah koordinat dalam poligon menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah koordinat dalam poligon menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-24 14:33:02

ke hadapan

1119 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. Kita boleh menambah koordinat dalam poligon menggunakan atribut points.

Tatabahasa

new fabric.Polygon( points: Array, { points: Array }: 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 menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar asalan, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek Poligon yang titiknya ialah sifat.

Kunci pilihan

mata - Hartanah ini menerima Array yang membolehkan kami menetapkan susunan mata.

Contoh 1: Rupa lalai bagi objek poligon

Mari lihat contoh kod untuk melihat cara menambah objek poligon pada kanvas. Dalam contoh ini, kami tidak menggunakan atribut points. Kami telah menentukan tatasusunan mata sebagai parameter pertama itu sendiri, yang mewakili nilai koordinat untuk digunakan.

<!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>Default appearance of Polygon object</h2>
   <p>You can see the 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: Menggunakan sifat Mata

Dalam contoh ini, kami menggunakan atribut titik dan memberikannya array yang terdiri daripada nilai koordinat poligon, di mana setiap titik ialah objek dengan nilai "x" dan "y". Seperti yang anda lihat, walaupun kami telah menentukan titik objek Poligon, sebaik sahaja kami menggunakan sifat titik, ia akan menimpa nilai dan menggunakan koordinat baharu.

<!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>Using the points property</h2>
   <p>You can see the Polygon object's coordinates have changed</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: 0, y: 30 },
         { x: 30, y: 30 },
         { x: 30, y: 0 },
         { x: 0, y: 0 },
      ];
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(points, {
         top: 50,
         left: 50,
         points: [
            { x: 0, y: 70 },
            { x: 70, y: 70 },
            { x: 70, y: 0 },
            { x: 0, y: 0 },
         ],
      });
      
      // 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 menambah koordinat dalam poligon menggunakan FabricJS.

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