Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan koordinat objek Line menggunakan FabricJS?

Bagaimana untuk mendapatkan koordinat objek Line menggunakan FabricJS?

WBOYke hadapan: 2023-09-22 17:45:091568semak imbas

如何使用 FabricJS 获取 Line 对象的坐标？

Dalam tutorial ini, kami akan menunjukkan cara mendapatkan koordinat garis menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mendapatkan koordinat objek Line, kami menggunakan kaedah getCoords.

Syntax

 getCoords(): Array

Menggunakan kaedah getCoords

Contoh

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getCoords digunakan. Kaedah getCoords mengembalikan koordinat kiri atas, kanan atas, kanan bawah dan kiri bawah Baris dalam format tatasusunan.

<!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 getCoords method</h2>
   <p>You can open console from dev tools and see the logged output</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 Line object
      var line = new fabric.Line([50, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using getCoords method
      console.log("The coordinates are: ", line.getCoords());
   </script>
</body>
</html>

Melukis garisan pepenjuru menggunakan kaedah getCoords

Contoh

Dalam contoh ini, kami telah menggunakan kaedah getCoords untuk mendapatkan koordinat kejadian Baris dengan koordinat mula dan akhir yang berbeza. Kita dapat melihat bahawa output yang direkodkan ialah: (100, 40), (220, 40), (220,120), (100,120), iaitu koordinat sudut kiri atas, sudut kanan atas, sudut kanan bawah dan sudut kiri bawah. daripada barisan masing-masing.

<!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 getCoords method for a slant line</h2>
   <p>You can open console from dev tools and see the logged output</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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using getCoords method
      console.log("The coordinates are: ", line.getCoords());
   </script>
</body>
</html>

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

对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mendayakan penskalaan retina untuk imej klon menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mendayakan penskalaan retina untuk imej klon menggunakan FabricJS?

Artikel berkaitan

Lihat lagi