Bagaimana untuk Mengezum Kanvas ke Kedudukan Kursor Tetikus dalam HTML5?

Mengezum Kanvas ke Kursor Tetikus

Apabila mencipta HTML5 projek yang melibatkan zum, menjajarkan zum dengan kedudukan kursor adalah penting untuk pengalaman mesra pengguna. Artikel ini bertujuan untuk membimbing anda melalui pengiraan yang diperlukan untuk melaksanakan fungsi ini.

Masalah:

Bagaimanakah kita boleh mengezum kanvas berbanding kedudukan kursor, serupa dengan Google Peta?

Pembolehubah Tersedia:

• Koordinat imej (x, y)
• Dimensi imej (lebar, tinggi)
• Koordinat kursor berbanding dengan pusat kanvas (kursor_x, cursor_y)

Penyelesaian:

1. Terjemah Kanvas: Alihkan konteks kanvas berdasarkan offset kursor, membenarkan zum di sekeliling kursor.
2. Skala Kanvas: Laraskan faktor skala untuk mengezum masuk atau keluar.
3. Terjemah Kembali: Kembalikan konteks kanvas ke kedudukan asalnya, mengimbangi terjemahan awal.

Berikut ialah coretan kod:

<code class="javascript">ctx.translate(cursor_x, cursor_y);
ctx.scale(factor, factor);
ctx.translate(-cursor_x, -cursor_y);</code>

Contoh dalam Tindakan:

Lawati http://phrogz.net/tmp/canvas_zoom_to_cursor.html untuk demonstrasi langsung. Ia menyokong menyeret dan mengezum dengan klik tetikus dan roda skrol.

Nota:

• Untuk zum yang tepat, ubah kedudukan kursor daripada ruang skrin kepada yang diubah konteks kanvas.
• Pada masa ini, gelagat zum Safari berbeza daripada penyemak imbas lain, mengakibatkan zum berlebihan.

Atas ialah kandungan terperinci Bagaimana untuk Mengezum Kanvas ke Kedudukan Kursor Tetikus dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!