Bagaimana untuk Mendapatkan Kedudukan Tetikus yang Tepat Berbanding Elemen Kanvas?

Mengesan Kedudukan Tetikus Berkaitan dengan Elemen Kanvas

Dalam bidang pembangunan web interaktif, tugas biasa adalah dengan tepat menentukan kedudukan kursor tetikus berbanding elemen tertentu, seperti sebagai kanvas tempat anda mungkin membuat apl lukisan yang menawan hati.

Satu pendekatan untuk cabaran ini memanfaatkan kuasa kaedah getBoundingClientRect() JavaScript. Kaedah ini memberikan maklumat berharga tentang kedudukan elemen dalam dokumen dan boleh memainkan peranan penting dalam menjejaki pergerakan tetikus.

Pertimbangkan coretan kod berikut yang menunjukkan cara menggunakan getBoundingClientRect() untuk mendapatkan kedudukan tetikus berbanding dengan elemen:

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  // e = Mouse click event.
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
};</code>

Begini cara ia berfungsi:

1. Pendengar acara onclick dilampirkan pada elemen dengan ID clickme.
2. Apabila diklik, pendengar peristiwa mengekstrak koordinat segi empat tepat terikat ("tegak") elemen sasaran.
3. Koordinat x dan y kursor tetikus, berbanding elemen, dikira dengan menolak sifat kiri dan atas segi empat tepat daripada klien kursorX dan nilai pelanggan.
4. Koordinat ini kemudian dilog ke konsol, membolehkan anda memerhati kedudukan tetikus dalam elemen.

Dengan melaksanakan teknik ini, anda akan dapat jejak dengan tepat pergerakan tetikus dalam elemen kanvas anda, membuka dunia kemungkinan untuk pengalaman pengguna yang interaktif dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kedudukan Tetikus yang Tepat Berbanding Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!