Bagaimanakah Saya Mendapatkan Kedudukan Tetikus Relatif kepada Elemen dalam Apl Lukisan JavaScript?

Mencari Kedudukan Tetikus Relatif dengan Elemen dalam Apl Lukisan

Menentukan kedudukan tetikus berbanding elemen adalah penting untuk mencipta aplikasi interaktif, seperti sebagai aplikasi lukisan. Untuk mencapai ini pada kanvas, anda perlu menggunakan kod JavaScript yang betul.

Penyelesaian:

Memandangkan penyelesaian bebas jQuery tidak tersedia, berikut ialah alternatif pendekatan:

<code class="js">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>

Penggunaan:

Kod ini menggunakan kaedah getBoundingClientRect() untuk mendapatkan sempadan elemen berbanding dokumen. Sifat clientX dan clientY acara tetikus kemudiannya digunakan untuk mengira kedudukan tetikus dalam elemen.

HTML dan CSS:

Untuk menguji kod, buat satu elemen dengan HTML dan CSS berikut:

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

<code class="css">#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}</code>

Apabila anda mengklik elemen "Klik Saya", konsol akan memaparkan kedudukan tetikus berbanding penjuru kiri sebelah atas elemen. Maklumat ini penting untuk menangkap pergerakan dan interaksi tetikus dengan tepat dalam aplikasi lukisan anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Mendapatkan Kedudukan Tetikus Relatif kepada Elemen dalam Apl Lukisan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!