Bagaimana untuk Menambah Pengendali Acara onClick pada Elemen Kanvas?

Menambahkan Pengendali Acara onClick pada Elemen Kanvas

Elemen kanvas menyediakan cara yang serba boleh dan cekap untuk melukis dan memanipulasi grafik pada halaman web. Walau bagaimanapun, menambah pengendali acara pada bentuk atau elemen individu dalam kanvas boleh menjadi satu cabaran. Panduan ini akan menyediakan penyelesaian menyeluruh untuk melampirkan pengendali acara onClick pada elemen kanvas, membolehkan anda mengesan klik pada kawasan tertentu dalam kanvas.

Pengendalian Acara untuk Elemen Kanvas

Tidak seperti HTML tradisional elemen, elemen kanvas tidak mempunyai elemen khusus yang boleh berinteraksi dengannya. Sebaliknya, anda perlu menggunakan pendekatan yang berbeza untuk menangkap peristiwa klik pada bentuk yang dilukis pada kanvas.

Pendengar Acara untuk Elemen Kanvas

Untuk mengendalikan acara klik pada kanvas, anda boleh menggunakan kaedah addEventListener:

canvas.addEventListener('click', function() { }, false);

Kod ini melampirkan pendengar acara pada elemen kanvas yang mencetuskan fungsi panggil balik setiap kali klik berlaku pada kanvas.

Mengesan Elemen Diklik dalam Kanvas

Untuk menentukan bentuk atau elemen pada kanvas yang diklik, anda perlu melakukan beberapa pengiraan:

var elemLeft = elem.offsetLeft + elem.clientLeft;
var elemTop = elem.offsetTop + elem.clientTop;
var context = elem.getContext('2d');

Garis ini mengira offset elemen kanvas dalam halaman dan dapatkan lukisan 2D konteks.

Menggunakan Tatasusunan untuk Maklumat Unsur

Untuk menjejaki kedudukan dan dimensi setiap elemen yang dilukis pada kanvas, cipta tatasusunan untuk menyimpan objek elemen:

var elements = [];

Setiap objek elemen hendaklah termasuk warna bentuk, lebar, ketinggian, ofset atas dan ofset kiri.

Mengesan Klik pada Bentuk Tertentu

Dalam fungsi panggil balik acara klik:

elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft;
    var y = event.pageY - elemTop;

    // Collision detection between clicked offset and element
    elements.forEach(function(element) {
        if (y > element.top &amp;&amp; y < element.top + element.height
            &amp;&amp; x > element.left &amp;&amp; x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

Kod ini mendapatkan semula koordinat klik dan menyemak setiap elemen dalam tatasusunan elemen untuk menentukan sama ada klik berlaku dalam sempadan bentuk . Jika ya, ia mencetuskan makluman.

Menyelesaikan masalah Percubaan Sebelumnya

Percubaan anda sebelum ini tidak berjaya kerana:

• Tetapkan nilai pulangan makluman kepada onClick harta, yang mencetuskan amaran serta-merta.
• Gunakan ' dan " secara bergantian, yang boleh menyebabkan ralat.
• Tetapkan rentetan pada sifat onClick, menghalang lampiran acara.
• Gunakan sifat onclick kuno, yang peka huruf besar-kecil.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Pengendali Acara onClick pada Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!