Bagaimana untuk Mendapatkan Koordinat Tetikus Relatif dengan Elemen Kanvas?

Mendapatkan Koordinat Tetikus Berkaitan dengan Elemen Kanvas

Dalam usaha untuk mencipta aplikasi lukisan berasaskan kanvas yang ringkas, satu cabaran biasa ialah menentukan kedudukan tetikus pada kanvas.

Penyelesaian

Satu pendekatan untuk menyelesaikannya ialah dengan menggunakan harta BoundingClientRect. Ini boleh dilaksanakan seperti berikut:

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

Contoh

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

Penjelasan

1. Apabila tetikus mengklik pada elemen clickme, pengendali acara onclick dicetuskan.
2. Kaedah getBoundingClientRect() mendapatkan semula kedudukan dan saiz elemen berbanding dengan viewport.
3. E.clientX dan e.clientY sifat mewakili kedudukan mutlak tetikus dalam port pandang.
4. Dengan menolak rect.left and rect.top daripada koordinat mutlak ini, kami memperoleh kedudukan tetikus berbanding sudut kiri atas elemen.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Koordinat Tetikus Relatif dengan Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!