Bagaimanakah Saya Boleh Mendapatkan Koordinat Klik Tetikus yang Tepat pada Elemen Kanvas?

Menentukan Koordinat Klik Tetikus pada Elemen Kanvas

Mendapatkan semula koordinat tepat klik tetikus dalam elemen kanvas adalah keperluan biasa dalam pelbagai aplikasi pengaturcaraan . Panduan berikut menyediakan pendekatan yang mudah untuk penyemak imbas web termasuk Safari, Opera dan Firefox.

Penyelesaian Silang Penyemak Imbas

Untuk mencapai penyelesaian yang mudah dan merentas penyemak imbas, fungsi JavaScript bernama getCursorPosition boleh ditakrifkan:

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

Fungsi ini mengira koordinat relatif kepada elemen kanvas sendiri.

Pengendalian Acara

Untuk melampirkan fungsi ini pada elemen kanvas, tambahkan pendengar acara untuk acara turun tetikus:

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});

Sekali klik tetikus dikesan, fungsi getCursorPosition digunakan, dan koordinat x dan y klik dilog ke konsol.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Koordinat Klik Tetikus yang Tepat pada Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!