Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk mencari koordinat pusat sebenar objek Imej?

FabricJS - Bagaimana untuk mencari koordinat pusat sebenar objek Imej?

PHPzke hadapan: 2023-08-24 11:09:121331semak imbas

FabricJS – 如何找到 Image 对象的真实中心坐标？

Dalam tutorial ini, kita akan belajar cara mencari koordinat tengah sebenar objek Imej menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mencari koordinat tengah sebenar objek Imej, kami menggunakan kaedah getCenterPoint.

Tatabahasa

getCenterPoint(): fabric.Point

Gunakan getCenterPointkaedah

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getCenterPoint. Kaedah getCenterPoint mengembalikan koordinat pusat sebenar objek. Dalam contoh ini, keluaran yang direkodkan ialah x= 256.5 dan y= 91, 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> 
   <img
      src="https://www.tutorialspoint.com/images/logo.png"
      id="img1"
      style="display: none"
   />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Gunakan kaedah getCenterPoint dan kaedah cropX

Contoh

Dalam contoh ini, kami menggunakan kaedah getCenterPoint dan kaedah cropX untuk membuktikan bahawa nilai titik tengah yang direkodkan akan kekal tidak berubah.

<!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 along with cropX 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>
   <img
      src="https://www.tutorialspoint.com/images/logo.png"
      id="img1"
      style="display: none"
   />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         cropX: 70,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

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

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menyelaraskan kandungan teks menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menyelaraskan kandungan teks menggunakan JavaScript?

Artikel berkaitan

Lihat lagi