Bagaimanakah anda mengezum Konteks Kanvas ke Kursor Tetikus dalam HTML5?

Mengezum Konteks Kanvas ke Kursor Tetikus

Dalam projek kanvas HTML5 yang melibatkan pengezum imej menggunakan roda skrol, anda mungkin menghadapi cabaran zum ke arah kursor, serupa dengan fungsi dalam Peta Google. Untuk mencapai kesan ini, satu siri pengiraan diperlukan.

Mengira Pergerakan

1. Menentukan Transformasi Konteks Kanvas:

   • Terjemah konteks kanvas dengan mengimbangi kursor (pt.x, pt.y).
   • Skalakan konteks menggunakan faktor zum (faktor).
   • Terjemah konteks kembali dengan negatif offset kursor.

   <code class="js">ctx.translate(pt.x, pt.y);
   ctx.scale(factor, factor);
   ctx.translate(-pt.x, -pt.y);</code>

2. Menukar Kedudukan Kursor:

   • Koordinat ruang skrin kursor perlu ditukar ke dalam konteks kanvas yang diubah koordinat untuk zum yang tepat.

Contoh Demonstrasi

Lawati pautan berikut untuk contoh yang berfungsi termasuk:

• Kanvas imej mengezum ke kursor
• Menyeret sokongan
• Klik untuk zum masuk, Shift-klik untuk zum keluar
• Skrol roda zum

Demo: http://phrogz.net/tmp/canvas_zoom_to_cursor.html

Nota: Dalam Safari, gelagat zum mungkin berbeza daripada Chrome atau Firefox.

Atas ialah kandungan terperinci Bagaimanakah anda mengezum Konteks Kanvas ke Kursor Tetikus dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!