Cara Meniru Gelagat Zum Peta Google dengan Kanvas: Mengezum Sekitar Kursor Tetikus?

Zum Kanvas di sekeliling Kursor Tetikus

Zum imej menggunakan roda skrol ialah ciri biasa dalam aplikasi web. Dalam kes ini, matlamatnya adalah untuk meniru gelagat Peta Google, di mana zum berlaku di sekeliling kursor tetikus.

Masalah

Cabarannya terletak pada pengiraan pergerakan yang diperlukan untuk mencapai kesan zum ini. Memandangkan koordinat sudut kiri atas imej, lebar, tinggi dan koordinat x dan y kursor tetikus berbanding dengan pusat kanvas, bagaimanakah kita menentukan transformasi zum?

Penyelesaian

Penyelesaian melibatkan tiga langkah menggunakan konteks kanvas:

1. Terjemah: Alihkan asal konteks ke kedudukan kursor tetikus untuk memusatkan zum di sekelilingnya.
2. Skala: Zum masuk atau keluar mengikut faktor yang diingini.
3. Terjemah (terbalik): Alihkan asal semula ke kedudukan asalnya.

Kod JavaScript berikut melaksanakan langkah-langkah ini:

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

Demo dan Nota Tambahan

Demonstrasi kerja teknik ini boleh didapati di sini: http ://phrogz.net/tmp/canvas_zoom_to_cursor.html

Demo menyokong penyeretan, klik-untuk-zum-masuk, shift-klik-untuk-zum-keluar dan zum roda tatal. Perlu diingat bahawa Safari mempamerkan gelagat zum yang lebih pantas berbanding penyemak imbas lain seperti Chrome dan Firefox.

Atas ialah kandungan terperinci Cara Meniru Gelagat Zum Peta Google dengan Kanvas: Mengezum Sekitar Kursor Tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!