Gunakan roda tetikus untuk zum halaman, klik dan seret untuk menyorot halaman

Question

Bagaimana cara menggunakan roda tetikus untuk mencipta kesan tatal dan panning untuk keseluruhan halaman? Pada asasnya sama seperti mana-mana editor 2D, tatal untuk zum dan klik dan seret untuk menyorot, tetapi untuk seluruh badan.

Saya tidak dapat mencari sebarang maklumat mengenainya dalam talian.

Answer 1

Jika anda tidak tahu di mana untuk bermula, anda akan terlanggar dinding dengan cepat, kerana mengetahui di mana untuk bermula adalah bahagian yang mudah. Berikut adalah panduan kasar:

1. Tambahkan pendengar acara pada acara wheel (ketahui caranya](https://stackoverflow.com/a/51276012/104380))
2. Dari nilai awal (semasa) zoom 值开始，计算轮子事件的增量并更新您的 zoom.
3. Gunakan zoom 值以某种形式操纵页面的比例。您可以在 body 元素上使用 CSS transform:scale() untuk tujuan ini.
4. Tambahkan pendengar acara untuk acara mousemove (ketahui caranya](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event))
5. Bertindak berdasarkan pergerakan tetikus yang dikesan dan hitung berapa banyak elemen body perlu dizum sorot untuk mencapai mana-mana daripada 4 tepi, bukannya melepasi. Panning boleh dilakukan melalui CSS transform:translate(x, y)