Bagaimana untuk mencari koordinat pusat sebenar objek Line menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencari koordinat pusat sebenar objek Line menggunakan FabricJS?

王林

Lepaskan： 2023-09-16 12:09:03

ke hadapan

1214 orang telah melayarinya

如何使用 FabricJS 找到 Line 对象的真实中心坐标？

Dalam tutorial ini, kita akan belajar cara mencari koordinat tengah 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 mencari koordinat tengah sebenar objek Line, kami menggunakan kaedah getCenterPoint.

Syntax

 getCenterPoint(): fabric.Point

Salin selepas log masuk

Menggunakan kaedah getCenterPoint

Contoh

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getCenterPoint digunakan. Kaedah getCenterPoint mengembalikan koordinat pusat sebenar objek. Dalam contoh ini, output yang direkodkan ialah x= 110.5 dan y= 150.5, yang merupakan titik tengah.

<!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 getCenterPoint method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah getCenterPoint dengan koordinat mula dan akhir baris yang berbeza

Contoh

Dalam contoh ini, kami menggunakan kaedah getCenterPoint i> untuk mendapatkan koordinat mula dan akhir bagi contoh Garisan, sebagai (25000 ) dan (250, 40). Titik tengah ialah 175.5 dan 145.5.

<!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 getCenterPoint method with different starting and ending coordinates of line
   </h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([100, 250, 250, 40], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

Salin selepas log masuk

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