Panzoom: Pinch zoom memindahkan gambar dari tengah layar

Terima kasih telah membuka masalah. Saya mencoba demo di iOS dan Android dan tidak dapat mereproduksi. Anda mencantumkan browser desktop, tetapi pinch zooming terutama untuk seluler (meskipun beberapa perangkat memiliki mouse dan layar sentuh). Mungkin berguna untuk mengetahui perangkat mana yang Anda gunakan, meskipun saya mungkin tidak dapat mengujinya.

Tidak banyak yang bisa saya lakukan tanpa bisa mereproduksi masalah. Jika Anda menggali lebih dalam dan menemukan bahwa perubahan kode di Panzoom memperbaikinya (atau bahwa kasus uji yang berbeda selain demo mereproduksi masalah), silakan beri komentar di sini dan saya akan mempertimbangkan tambalan.

Hai Pak Willison;

Terimakasih atas balasan anda. Saya menggunakan versi desktop dan seluler
kata browser. Saya menggunakan Redmi Note 8T dan Galaxy 8 untuk menguji ini.

Untuk melihat masalah ini, mungkin Anda bisa melihat demo yang saya kembangkan?
Cukup ketik nama (tidak ada yang disimpan, itu hanya permainan anak-anak) dan klik
pada tombol "Exploració lliure"; Anda akan diarahkan ke Panzoomed
gambar. Seperti yang akan Anda lihat, zoom roda mouse berfungsi dengan baik, tetapi zoom cubit (dan
sebenarnya tombol panzoom.zoomIn() dan panzoom.zoomOut() juga) memindahkan
gambar.

http://bake250.isdeveloping.com/objectiuexplora/solsticidelspirineus/

Saya sangat berterima kasih atas bantuan Anda, dan mohon maaf atas ketidaknyamanan ini.

Salam Hormat;

Jorge Sánchez Blanco

El lun., 21 sept. 2020 terakhir 19:45, Timmy Willison (<
[email protected]>) penjelasan:

Terima kasih telah membuka masalah. Saya mencoba demo
https://timmywil.com/panzoom/demo di iOS dan Android dan tidak bisa
mereproduksi. Anda mencantumkan browser desktop, tetapi zoom cubit terutama untuk
seluler (meskipun beberapa perangkat memiliki mouse dan layar sentuh). Itu mungkin
sangat membantu untuk mengetahui perangkat mana yang Anda gunakan, meskipun saya mungkin akan menggunakannya
tidak dapat mengujinya.

Tidak banyak yang bisa saya lakukan tanpa bisa mereproduksi masalah. Jika
Anda menggali lebih dalam dan menemukan bahwa perubahan kode di Panzoom memperbaikinya (atau a
kasus uji yang berbeda selain demo mereproduksi masalah), tolong
komentar di sini dan saya akan mempertimbangkan patch.

—
Anda menerima ini karena Anda yang menulis utas.
Balas email ini secara langsung, lihat di GitHub
https://github.com/timmywil/panzoom/issues/512#issuecomment-696267620 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AOF4EAOK6YQVAHINOAQ3JZTSG6GMRANCNFSM4RUT4P7A
.

Saya mengalami masalah yang sama. Sepertinya titik fokus tidak dihitung dengan benar dan semuanya berada di bawah.

@jsblanco saya mengerti. Panzoom mengandalkan transform-origin: 50% 50% , yang memusatkan animasi di tengah area pandang daripada di tengah gambar, yang dalam kasus ini akan lebih rendah. Ini memindahkan gambar karena pengaturan contain: outside untuk mencegah gambar turun terlalu jauh. Saya pikir ini dapat diperbaiki dengan memanggil zoomToPoint atau dengan menggunakan zoom dengan opsi focal sebagai gantinya dan menemukan titik di viewport yang sebenarnya merupakan pusat gambar. Apakah itu masuk akal?

Saya mungkin bisa melakukan sesuatu seperti ini secara default ketika contain: outside disetel.

@rmatec Apakah Anda juga menggunakan contain: outside ?

Saya tidak menggunakan opsi berisi. Dalam kasus saya, sepertinya titik fokus berada di tengah bawah. Mencubit masuk atau keluar dilakukan relatif terhadap titik itu.

@rmatec Saya pikir harus ada beberapa opsi dalam permainan, karena saya tidak melihat perilaku ini di demo. Apakah ada opsi lain yang Anda atur?

Saya menggunakan yang berikut ini untuk menginisialisasi Panzoom.

const panzoomConfig = { minScale: 1, maxScale: 2, step: 0.5, duration: 200 };

Ini bekerja dengan sangat baik di desktop tetapi untuk beberapa alasan tidak di ponsel.

Ok, kasus Anda terdengar seperti itu mungkin berbeda. Bisakah Anda mereproduksi di https://jsbin.com atau https://codepen.io dan membuat tiket baru? Berikut template yang dapat dikloning https://jsbin.com/dibofogini/1/edit?html ,js,output.

Akan melakukan. Terima kasih.

Untuk beberapa alasan, saat menggunakan opsi fokus, gambar muncul di dekat
kanan bawah, dan tidak ada zoom lebih lanjut yang dapat terjadi, baik ke dalam maupun ke luar.
Mungkin saya melakukan sesuatu yang salah? Apakah saya harus melewati parameter tertentu
ke panzoom.zoomIn() dan .zoomOut() untuk menunjukkan titik fokus, atau hanya
memasukkannya ke dalam deklarasi awal panzoom sudah cukup?

Untuk apa nilainya, saya sudah mencoba metode berikut untuk mendapatkan fokus
titik. Saya juga mencoba memasukkan angka mentah.

clientX: window.innerWidth /2,
clientY: window.innerHeight/2

clientX: document.documentElement.clientWidth/2,
clientY: document.documentElement.clientHeight/2

Menghapus isi: di luar sama sekali hanya membuat gambar hitam.

El mar., 22 september 2020 terakhir 15:59, Timmy Willison (<
[email protected]>) penjelasan:

@jsblanco https://github.com/jsblanco Saya mengerti. Panzoom mengandalkan transform-origin:
50% 50%, yang memusatkan animasi di tengah viewport, bukan
daripada di tengah gambar, yang akan lebih rendah dalam kasus ini. Dia
memindahkan gambar karena mengandung: pengaturan luar untuk mencegah
gambar dari pergi terlalu jauh ke bawah. Saya pikir ini bisa diperbaiki dengan menelepon
zoomToPoint atau dengan menggunakan zoom dengan opsi fokus sebagai gantinya dan temukan
titik di area pandang yang sebenarnya merupakan pusat gambar. Melakukan
masuk akal?

Saya mungkin bisa melakukan sesuatu seperti ini secara default ketika mengandung: di luar
diatur.

@rmatec https://github.com/rmatec Apakah Anda juga menggunakan mengandung: luar?

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/timmywil/panzoom/issues/512#issuecomment-696740708 ,
atau berhenti berlangganan
https://github.com/notifications/unsubscribe-auth/AOF4EANBQXE5TDJOZNTBN6LSHCUVXANCNFSM4RUT4P7A
.

@jsblanco Maaf, ini lebih rumit dari itu. Cara melakukannya adalah dengan menemukan bagian tengah gambar dan menerjemahkannya ke titiknya di viewport induk panzoom. Anda kemudian akan meneruskannya sebagai opsi fokus, dan itu harus dihitung setiap kali Anda memanggil zoom. Namun, izinkan saya melihat apakah saya dapat memberikan contoh untuk Anda. Itu akan memperbaiki zoomIn / zoomOut .

Yang mengatakan, ini tidak akan mengubah perilaku mencubit zoom. Diperdebatkan, itu melakukan hal yang benar karena memperbesar titik-titik tertentu bertentangan dengan contain: outside . Saya tidak yakin perbaikannya ada kecuali mungkin untuk tidak mengizinkan zoom jika gambar perlu dipindahkan agar tetap di viewport dengan benar.

Ok, kasus Anda terdengar seperti itu mungkin berbeda. Bisakah Anda mereproduksi di https://jsbin.com atau https://codepen.io dan membuat tiket baru? Berikut template yang dapat dikloning https://jsbin.com/dibofogini/1/edit?html ,js,output.

Saya telah membuat https://github.com/timmywil/panzoom/issues/513 untuk kasus khusus saya. Ada tautan ke JSBin yang menunjukkan masalah tersebut.

Saya dapat mereproduksi masalah ini jika saya membiarkan "animate: true" aktif.
Masalah ini tidak muncul di "animate: false" - Saya telah mengkloning template Anda @timmywil untuk mereproduksi masalah itu:

https://jsbin.com/pemoveyeri/1/edit?

(Saya telah menerapkan pendengar acara roda untuk memperbesar secara langsung - Jika Anda menggulir cukup cepat, posisi pergeseran akan terjadi.)

Oke, saya memindahkan masalah saya ke #515 karena meskipun masalahnya sama, tetapi dengan konfigurasi yang berbeda.

Hai;

Maaf lama menjawab. Saya tidak berpikir itu ada hubungannya dengan contain="outside"; Saya baru saja menghapusnya dan masih menunjukkan perilaku yang sama, meskipun tidak terlalu intens. Namun, div panzoom dan gambar memiliki ukuran yang tidak tergantung pada jalan; mungkinkah itu bagian dari masalah?

Terima kasih

@jsblanco Perbaikannya harus sama.

Hai, saya akan membuka masalah baru tentang zoom roda yang menjauh dari pusat tetapi melihat yang ini dan berpikir itu cukup terkait. Berikut adalah temuan dan solusi saya. Perhatikan bahwa saya hanya menguji di browser di MacBook menggunakan trackpad.

Saya perhatikan bahwa untuk demo zoom titik fokus , bagian tengah melayang ke kiri atas saat memperbesar Safari, Firefox. Saya mendapatkan perilaku yang sama bahkan di Chrome, tetapi hanya ketika inspektur web terbuka.

Jadi saya mulai memeriksanya dan kecurigaan saya adalah bahwa peristiwa roda mouse terlalu sering dipicu dan hal-hal tidak diperbarui dengan benar karena sifat panzoom yang asinkron . Saya pikir jika saya mencoba untuk mencekik frekuensi pembesaran mungkin membantu dan cukup yakin tampaknya "berfungsi". Anda dapat melihatnya beraksi di sini: https://jsbin.com/joliduwulo/1/edit?html ,js,output.

Peringatannya adalah bahwa pembesaran akan tampak kurang mulus. Dalam contoh ini saya membatasinya menjadi satu zoom maksimal setiap 20 md tetapi ketika saya menguji dengan SVG besar, terutama di Firefox, saya perlu mengaturnya menjadi sekitar 50 md agar tidak kehilangan titik fokus.

@timmywil tolong beri tahu saya jika Anda ingin saya membuka edisi baru. Ini sepertinya peretasan tetapi itu memecahkan masalah bagi saya. Jika menurut Anda solusinya layak untuk ditelusuri, saya akan senang membantu berkontribusi.

+1 pada kemampuan untuk memusatkan pada elemen panzoom daripada viewport

Ganti fungsi pindah di panzoom.ts:426

fungsi pindah (acara: PointerEvent) {
jika (
!isPanning ||
origX === tidak terdefinisi ||
origY === tidak terdefinisi ||
startClientX === tidak terdefinisi ||
startClientY === tidak terdefinisi
) {
kembali
}
addPointer(pointer, acara)
const saat ini = getMiddle(pointer)
if (pointer.length > 1) {
// Gunakan jarak antara 2 pointer pertama
// untuk menentukan skala saat ini
// mencegah masalah zoom di ponsel
if (jarak mulai === 0) {
startDistance = getDistance(pointer);
}
const diff = getDistance(pointer) - startDistance
const toScale = constrainScale((diff * options.step) / 80 + startScale).scale
zoomToPoint(toScale, saat ini)
} lain {
// menambahkan kondisi lain untuk mencegah kesalahan titik fokus zoom seluler
panci(
origX + (current.clientX - startClientX) / skala,
origY + (current.clientY - startClientY) / skala,
{
menghidupkan: palsu
}
);
}
}