Pengenalan kepada pengendalian acara kemahiran tutorial HTML5 Canvas_html5

DOM ialah bahagian yang sangat penting dalam medan bahagian hadapan Web DOM digunakan bukan sahaja semasa memproses elemen HTML, tetapi juga dalam pengaturcaraan grafik. Sebagai contoh, dalam lukisan SVG, pelbagai grafik dimasukkan ke dalam halaman dalam bentuk nod DOM, yang bermaksud bahawa grafik boleh dimanipulasi menggunakan kaedah DOM. Sebagai contoh, jika terdapat elemen anda boleh terus menggunakan jquery untuk menambah acara klik $('#p1').click(function(){…})". Walau bagaimanapun, kaedah pemprosesan DOM ini tidak sesuai untuk HTML5 Ia tidak lagi digunakan dalam Kanvas menggunakan set mekanisme lain Tidak kira berapa banyak grafik yang dilukis pada Kanvas, Grafik itu sendiri sebenarnya adalah sebahagian daripada Kanvas diperoleh secara berasingan, jadi ia tidak boleh diberikan secara langsung kepada seseorang Menambahkan acara JavaScript pada grafik

.

Batasan Kanvas

Dalam Kanvas, semua grafik dilukis pada bingkai Kaedah lukisan tidak akan mengeluarkan elemen grafik yang dilukis sebagai nilai pulangan dan js tidak boleh mendapatkan elemen grafik yang dilukis. Contohnya:

Salin kod

Kod tersebut adalah seperti berikut:

cvs = document.getElementById( 'mycanvas' );
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
konsol .log( theRect); //undefined

Kod ini melukis segi empat tepat dalam teg kanvas Pertama sekali, anda dapat melihat bahawa kaedah tepat untuk melukis grafik tidak mempunyai nilai pulangan. Jika anda membuka alat pembangun penyemak imbas, anda juga boleh melihat bahawa tiada kandungan telah ditambahkan di dalam teg kanvas, dan elemen kanvas serta konteks semasa yang diperoleh dalam js tidak mempunyai sebarang kandungan yang menunjukkan grafik baharu.

Jadi, kaedah DOM yang biasa digunakan pada bahagian hadapan tidak boleh digunakan dalam kanvas. Sebagai contoh, jika anda mengklik pada segi empat tepat dalam Kanvas di atas, anda sebenarnya akan mengklik pada keseluruhan elemen Kanvas.

Ikat peristiwa pada elemen Kanvas

Memandangkan acara itu hanya boleh mencapai tahap elemen Kanvas, jika anda ingin pergi lebih jauh dan mengenal pasti grafik di dalam Kanvas tempat klik berlaku, anda perlu menambah kod untuk pemprosesan. Idea asas ialah: mengikat acara pada elemen Kanvas Apabila peristiwa itu berlaku, semak kedudukan objek acara, dan kemudian semak grafik yang meliputi kedudukan itu. Sebagai contoh, dalam contoh di atas, segi empat tepat telah dilukis, yang meliputi julat 10-110 pada paksi-x dan 10-110 pada paksi-y. Selagi tetikus diklik dalam julat ini, ia boleh dianggap sebagai mengklik pada segi empat tepat dan peristiwa klik yang perlu diproses oleh segi empat tepat boleh dicetuskan secara manual. Idea ini sebenarnya agak mudah, tetapi pelaksanaannya masih agak rumit. Bukan sahaja kecekapan proses penghakiman ini perlu dipertimbangkan, tetapi jenis peristiwa juga perlu dinilai semula di beberapa tempat, dan mekanisme penangkapan dan menggelegak di dalam Kanvas mesti ditakrifkan semula.

Perkara pertama yang perlu dilakukan ialah mengikat acara pada elemen Kanvas Contohnya, jika anda ingin mengikat acara klik pada grafik di dalam Kanvas, anda perlu memproksi acara tersebut melalui elemen Kanvas:

Salin kod

Kod tersebut adalah seperti berikut:

cvs = document.getElementById( 'mycanvas' );
cvs.addEventListener('klik', fungsi(e){
//...
}, palsu);

Seterusnya, anda perlu menentukan lokasi objek peristiwa berlaku Atribut layerX dan layerY bagi objek acara e mewakili koordinat dalam sistem koordinat dalaman Kanvas. Walau bagaimanapun, Opera tidak menyokong atribut ini dan Safari merancang untuk mengalih keluarnya, jadi kami perlu membuat beberapa kaedah penulisan yang serasi:

Salin kod

Kod tersebut adalah seperti berikut:

fungsi getEventPosition(ev){
var x, y;
jika (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} lain jika (ev. offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
kembali {x: x, y: y};
}
//Nota: Untuk menggunakan fungsi di atas, anda perlu menetapkan kedudukan elemen Kanvas kepada mutlak.

Sekarang kita mempunyai kedudukan koordinat objek acara, kita perlu menentukan grafik dalam Kanvas yang meliputi koordinat ini.

kaedah isPointInPath

Kaedah isPointInPath Canvas boleh menentukan sama ada grafik konteks semasa meliputi koordinat tertentu, seperti:

Salin kod

Kod tersebut adalah seperti berikut:

cvs = document.getElementById( 'mycanvas' );
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath (50, 50); //true
ctx.isPointInPath(5, 5);
Seterusnya, tambahkan pertimbangan acara untuk menentukan sama ada peristiwa klik berlaku pada segi empat tepat:

Salin kod

Kod tersebut adalah seperti berikut:

cvs.addEventListener('click ', fungsi (e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//Mengklik segi empat tepat
}
}, palsu );

Di atas ialah kaedah asas untuk mengendalikan peristiwa Canvas, tetapi kod di atas mempunyai had Memandangkan kaedah isPointInPath hanya menentukan laluan dalam konteks semasa, apabila berbilang grafik telah dilukis dalam Kanvas, hanya Acara boleh dinilai berdasarkan konteks grafik terakhir, contohnya:

Salin kod

Kodnya adalah seperti berikut:

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20); //true
ctx.beginPath();
ctx.rect(110, 110, 100 , 100);
ctx.stroke();
ctx.isPointInPath(150, 150); //true
ctx.isPointInPath(20, 20); //false

Seperti yang anda lihat daripada kod di atas, kaedah isPointInPath hanya boleh mengenal pasti laluan grafik dalam konteks semasa dan laluan yang dilukis sebelum ini tidak boleh dinilai secara retrospektif. Penyelesaian kepada masalah ini ialah: apabila peristiwa klik berlaku, lukis semula semua grafik dan gunakan kaedah isPointInPath untuk setiap satu yang dilukis untuk menentukan sama ada koordinat acara berada dalam liputan grafik.

Cat semula gelung dan acara menggelegak

Untuk mencapai lukisan semula kitaran, parameter asas grafik mesti disimpan terlebih dahulu:

Salin kod

Kodnya adalah seperti berikut:

arr = [
{x:10, y:10, lebar:100, tinggi:100},
{x:110, y: 110, lebar: 100, tinggi:100}
];

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

draw( );

function draw(){
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v){
ctx. beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
});
}

Kod di atas menyimpan parameter asas dua segi empat tepat setiap kali kaedah cabutan dipanggil, parameter asas ini akan dipanggil dalam gelung untuk melukis dua segi empat tepat. Kaedah clearRect juga digunakan di sini untuk mengosongkan kanvas semasa melukis semula. Perkara seterusnya yang perlu dilakukan ialah menambah perwakilan acara dan menggunakan kaedah isPointInPath pada setiap konteks semasa melukis semula:

Salin kod

Kod tersebut adalah seperti berikut:

cvs.addEventListener('click ', fungsi (e){
p = getEventPosition(e);
draw(p);
}, false);

Apabila peristiwa berlaku, lulus koordinat objek acara untuk melukis kaedah pemprosesan. Beberapa perubahan kecil perlu dibuat pada kaedah cabutan di sini:

Salin kod

Kod tersebut adalah seperti berikut:

cabutan fungsi(p){
var who = [];
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v, i){
ctx.beginPath( );
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
if(p && ctx.isPointInPath(p.x, p.y)){
// Jika koordinat peristiwa dihantar masuk, gunakan isPointInPath untuk menentukan
//Jika persekitaran semasa meliputi koordinat, letakkan nilai indeks persekitaran semasa ke dalam tatasusunan
who.push(i);
}
});
//Mengikut nilai indeks dalam tatasusunan, elemen yang sepadan boleh ditemui dalam tatasusunan arr.
kembalikan siapa;
}

Dalam kod di atas, apabila peristiwa klik berlaku, kaedah cabutan akan melakukan lukisan semula, dan semasa proses lukisan semula, semak sama ada setiap grafik merangkumi koordinat acara Jika penghakiman itu benar, grafik itu dianggap diklik , dan Letakkan nilai indeks grafik ke dalam tatasusunan, dan akhirnya gunakan tatasusunan sebagai nilai pulangan kaedah cabutan. Di bawah mekanisme pemprosesan ini, jika terdapat N grafik dalam Kanvas, sebahagian daripadanya bertindih dan peristiwa klik berlaku dalam kawasan bertindih ini, maka akan terdapat N ahli dalam tatasusunan kembali kaedah cabutan. Pada masa ini, ia agak serupa dengan situasi acara menggelegak Ahli terakhir tatasusunan berada di bahagian atas Kanvas, dan ahli pertama berada di bahagian bawah , dan ahli lain ialah e.sasaran Nod dihantar ke semasa proses gelembung. Sudah tentu, ini hanyalah kaedah pemprosesan yang paling mudah Jika anda benar-benar ingin mensimulasikan pemprosesan DOM, anda perlu menetapkan hubungan ibu bapa-anak untuk grafik.

Di atas ialah kaedah asas pengendalian acara Canvas. Dalam aplikasi sebenar, cara untuk cache parameter grafik, cara melakukan lukisan semula gelung, dan cara mengendalikan acara menggelegak semuanya perlu ditangani mengikut situasi sebenar. Di samping itu, klik ialah peristiwa yang agak mudah dikendalikan Peristiwa yang agak menyusahkan ialah alih tetikus, keluar tetikus dan gerakan tetikus Memandangkan sebaik sahaja tetikus memasuki elemen Kanvas, peristiwa gerakan tetikus sentiasa berlaku, jadi jika anda ingin menetapkan alih tetikus atau tetikus secara berasingan. untuk grafik tertentu, anda juga perlu merekodkan laluan pergerakan tetikus dan menetapkan status masuk dan keluar untuk grafik. Apabila langkah pemprosesan menjadi lebih kompleks, peningkatan perhatian mesti diberikan kepada isu prestasi.