Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk mendapatkan kedudukan objek Imej berbanding dengan asal?

FabricJS - Bagaimana untuk mendapatkan kedudukan objek Imej berbanding dengan asal?

王林ke hadapan: 2023-09-16 20:05:021214semak imbas

FabricJS – 如何获取 Image 对象相对于原点的位置？

Dalam tutorial ini, kita akan belajar cara mendapatkan kedudukan objek Imej berbanding asalnya 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 mendapatkan kedudukan objek Imej berbanding dengan asal, kami menggunakan kaedah getPointByOrigin.

Tatabahasa

getPointByOrigin(originX: String, originY: String): fabric.Point

Parameter

originX - Parameter ini menerima String yang menyatakan asal mendatar. Nilai yang mungkin adalah "kiri", "tengah", atau "kanan".
originY - Parameter ini menerima String mewakili asal menegak. Nilai yang mungkin adalah "Atas", "Pusat", atau "Bawah".

Gunakan getPointByOriginkaedah

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getPointByOrigin. Kaedah getPointByOrigin mengembalikan koordinat objek asal yang ditentukan pengguna. Dalam contoh ini, kami juga menggunakan kaedah getCenterPoint supaya anda boleh melihat titik tengah sebenar objek Imej yang diberikan. Dan apabila menggunakan kaedah getPointByOrigin, kita menggunakan titik kiri bawah sebagai asal, jadi output yang direkodkan ialah x= 110 dan y= 132.

<!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 getPointByOrigin method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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 getCenterPoint method
      console.log(
         "The real center point of the object is: ",
         image.getCenterPoint()
      );
      
      // Using getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("left", "bottom")
      );
   </script>
</body>
</html>

Gunakan kaedah getPointByOrigin dengan nilai yang berbeza

Contoh

Dalam contoh ini, kami menggunakan kaedah getPointByOrigin untuk mendapatkan koordinat objek Imej apabila titik tengah mendatar dan menegak adalah 'kanan' dan 'atas'. Ini bermakna titik kanan atas akan dianggap sebagai pusat.

<!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 getPointByOrigin method with different values</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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 getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("right", "top")
      );
   </script>
</body>
</html>

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk mendapatkan kedudukan objek Imej berbanding dengan asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String 对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mencipta kanvas dengan kursor menunggu menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mencipta kanvas dengan kursor menunggu menggunakan FabricJS?

Artikel berkaitan

Lihat lagi