Pdf.js: Gunakan zoom yang lebih alami di ponsel

Dibuat pada 18 Jan 2013  ·  95Komentar  ·  Sumber: mozilla/pdf.js

Sekarang Anda harus menekan tombol plus / minus bahkan di ponsel untuk memperbesar dokumen. Ini sangat aneh terutama karena pinch-to-zoom juga aktif. Menurut saya, cara terbaik untuk menggunakan perangkat seluler adalah dengan merender pada ukuran "alami", dan membiarkan browser mengontrol zoom, mirip dengan halaman web.

1-viewer 2-feature

Komentar yang paling membantu

@ltullman @ hetalv985 Saya berhasil membuatnya bekerja menerapkannya sendiri, periksa inti saya di sini:

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
cukup tempelkan itu ke akhir viewer.html 👍 itu saja.

Semua 95 komentar

Inilah yang ingin kami lakukan, tetapi untuk V1, pinch to zoom mengalami masalah sehingga kami harus menggunakan tombol zoom.

Bisakah Anda menguraikan masalahnya? Saya pikir kami mungkin dapat memprioritaskannya untuk Anda agar PDF.js berfungsi dengan baik.

Saya rasa Anda tidak ingin browser melakukan zoom dalam kasus ini. Jika pdf.js merender dokumen pada 800x600, dan Anda mencubit zoom in, browser hanya akan terus merender konten 800x600 itu pada resolusi baru yang lebih tinggi yang mungkin atau mungkin tidak terlihat seperti sampah tergantung pada resolusi perangkat dan bagaimana caranya banyak yang telah Anda perbesar. (Saya berasumsi pdf.js masih menggunakan kanvas untuk rendering dan bukan svg?)

@Snuffleupagus @timvandermeij Apakah salah satu dari Anda tertarik untuk mengerjakan ini? Tampaknya seharusnya tidak terlalu sulit menggunakan pustaka bersama di gaia https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js

@brendandahl Saya pasti akan memasukkannya ke dalam daftar tugas saya dan segera mulai bereksperimen dengannya. https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 tampaknya memiliki contoh yang baik, karena 'transformasi' digunakan untuk acara cubitan 2 jari. Akan sangat bagus jika pinch to zoom berfungsi, karena ini cukup sering digunakan di perangkat seluler.

Saya sedang mengerjakan ini. Pengguna yang tertarik dapat mengawasi https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom untuk kemajuannya. Ini sudah menangkap perintah pinch-to-zoom di tablet dan ponsel saya, tetapi akurasinya harus ditingkatkan, serta rendering ulang yang sebenarnya (saya perlu menemukan cara untuk menghitung skala baru dengan skala lama dan titik tengah baru, atau cara lain).

@timvandermeij Satu hal yang mungkin perlu kita lakukan sebelum menerapkan ini adalah meningkatkan zoom. Kita telah berbicara tentang pertama hanya menggunakan transformasi css untuk menskalakan kanvas, kemudian mulai rendering ulang dan kemudian setelah rendering ulang selesai, tunjukkan kanvas baru.

Saya sangat yakin bahwa solusi terbaik di sini adalah solusi yang mengandalkan kompositor browser untuk melakukan zoom sementara (animasi selama pinch atau double tap) dan kemudian biarkan pdf.js menggambar ulang pada resolusi baru. Bagian yang menyedihkan di sini adalah bahwa saat ini konten tidak menyadari perubahan zoom, dan menurut saya mengubah ukuran kanvas ke resolusi baru tidak akan berhasil. Kami mungkin perlu meningkatkan spesifikasi kanvas untuk menangani ini.

Saya cukup sukses dengan hammer.js. Saya mengizinkan pinch "asli" dari browser (yang menyebabkan PDF buram) dan setelah pinchend saya menggambar ulang kanvas PDF, dengan scale = scale * zoom dan memberi kanvas css "transform: scale (1 / zoom)". Jadi semua akan berada di tempat yang sama (terutama teks dan jangkar). Terlihat rapi.

@skruse Saya menyiapkan tambalan untuk menerapkan pinch to zoom beberapa waktu yang lalu (lihat # 3708), juga dengan Hammer.js, tetapi saya belum berhasil membuatnya berfungsi dengan baik di perangkat seluler / tablet. Gerakan mencubit menyebabkan banyak masalah kinerja dan stabilitas. Apakah Anda keberatan membagikan implementasi Anda dengan kami? Jika tidak, dapatkah Anda membuat permintaan tarik dengan implementasi pinch to zoom? Mungkin itu bisa menggantikan milik saya jika berfungsi lebih lancar di perangkat seluler / tablet. :)

Hai skruse, bagaimana Anda bisa menghitung rasio zoom di akhir zoom?

var zoom = document.documentElement.clientWidth / window.innerWidth;

Dan saya juga mendapat masalah kinerja: Seseorang tidak boleh memperbesar "terlalu jauh" pada perangkat seluler, dalam hal parameter "skala". Saya kira 2 atau 3 adalah yang paling maksimal.

+2 untuk ini

Ada yang punya solusi untuk masalah lama 2 tahun ini?

Sejauh yang saya tahu, belum ada yang dilakukan tentang ini. Saya mengacu pada komentar saya sebelumnya di https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Kami mengundang siapa pun untuk mengirimkan PR untuk ini setelah ada kode yang berfungsi.

Akan sangat senang melihat solusi untuk ini. Saat ini, ini adalah satu-satunya hal yang menghentikan saya menggunakan pdf.js

:(

Pinch zoom akan sangat bagus! Saya menemukan plugin jquery ini yang menggunakan pdf.js dan memiliki pinch zoom dan swiping halaman. http://touchpdf.net/demo/index.htm Tapi alangkah baiknya jika sudah dibangun di pdf.js dari awal :-)

+1 Ingin sekali melihat ini di sini.

+1, juga apakah contoh di tempat lain yang menggunakan hammer.js untuk merekam kejadian dan kemudian memanggil fungsi zoom pdf.js bukan metode yang relatif "bersih"?

@sporkman apa yang saya lakukan pada akhirnya adalah membuat kanvas sangat besar, kemudian menggunakan zoom browser asli untuk memungkinkan zoom (aplikasi saya dirancang untuk perangkat sentuh). saya dapat membagikan sumbernya jika diperlukan.

@rorysmorris bagaimana Anda mengatur untuk menonaktifkan zoom browser asli saat mencubit saat menggulir? Saya juga telah mengimplementasikan hammer.js di pdf.js tetapi tidak dapat mengatasi masalah khusus itu

Sudahkah Anda mencoba menggunakan properti touch-action CSS?
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Pada 5 Okt 2016 15:15, "toplay3" [email protected] menulis:

@rorysmorris https://github.com/rorysmorris bagaimana Anda bisa mendapatkannya
sekitar menonaktifkan zoom browser asli saat mencubit saat menggulir? saya sudah
juga menerapkan hammer.js pada pdf.js tetapi tidak bisa menyiasatinya
isu

-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/mozilla/pdf.js/issues/2582#issuecomment -251670785,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ABTUT83E287dv4LSs4T_TGnzwe8yqCMYks5qw6LmgaJpZM4AXvZ2
.

@ Rob - W
wow jenius! bekerja dengan sempurna sekarang! Terima kasih banyak!

Kapan masalah ini berencana untuk diimplementasikan? Sudah cukup lama sejak masalah ini pertama kali diposting. Tak perlu dikatakan +1!

Saya juga memeriksa masalah ini setiap minggu sejak setahun sekarang. Akan luar biasa untuk memilikinya dalam inti atau sebagai tambahan dengan palu js.

Agar lebih konstruktif di utas ini, berikut adalah persyaratan untuk UI (jika seseorang ingin benar-benar membantu dan mempercepat penyelesaian masalah) dan tidak ada yang khusus untuk PDF.js:

  • untuk memperbesar dan menggeser set DIV (dengan ukuran berbeda) yang ditumpuk secara vertikal
  • tidak memungkinkan pengguna tersesat di viewport pada skala yang berbeda
  • mendeteksi dan menginformasikan ketika visibilitas div atau skala yang terlihat berubah.

Yang terakhir ini penting karena kami tidak ingin mengecat semua halaman dengan resolusi maksimal pada perangkat berdaya rendah. Jika seseorang akan memiliki prototipe, temukan saya di IRC. Saya akan membantu menghubungkan PDFPageView untuk visibilitas dan acara skala. Haruskah saya juga menetapkan bug 5-baik-pemula?

Saya setuju bahwa ini akan menjadi bug pemula yang baik, jadi saya beri label seperti itu.

Ini bukan hanya untuk seluler, saya juga mendapatkan permintaan fitur untuk mendukung zoom trackpad dua jari (di Mac).

Dari penyelidikan singkat saya, saya menemukan bahwa belum ada cara lintas browser untuk mendukung gerakan zoom.

+1

@ toplay3 dan @ Rob - W Apa yang Anda lakukan untuk membuatnya bekerja? Menambahkan "touch-action: auto;"? Untuk apa? Dan apa lagi yang kamu lakukan? Terima kasih!

Halo semuanya, seperti kebanyakan dari Anda, saya tertarik untuk membuat pinch to zoom berfungsi, apakah ada yang bisa melakukannya, bahkan dengan menggunakan libs eksternal seperti hammer? Jika Anda berhasil, apa yang disiapkan? @rorysmorris @ toplay3 @ Rob - W terima kasih

👍

@roryorris ada saran tentang pertanyaan di atas? terima kasih :)

Hai @squallstar - pada awalnya saya mencoba menggunakan pustaka JS pinch and zoom untuk menangani ini untuk saya, tetapi saya menemukan beberapa masalah. Itu tidak memperbesar seperti yang saya inginkan, yaitu akan memungkinkan kanvas PDF benar-benar keluar dari layar, ketika saya tidak pernah ingin tepinya jauh dari tepi layar, jika itu masuk akal. Pada akhirnya, saya hanya menggunakan zoom asli yang ada di browser seluler untuk mencubit / memperbesar / menavigasi. Saya menyiapkan PDF.js untuk merender PDF pada 3x ukuran piksel yang sedang ditampilkan, kemudian diperkecil dengan CSS, sehingga akan tetap cukup tajam saat diperbesar. Jika Anda memerlukan bantuan, saya dapat menunjukkan contoh kerja saya penerapan.

@rorysmorris terima kasih, alangkah baiknya jika Anda menunjukkan kepada saya (atau mengirim cuplikan) atau cara Anda menerapkannya. Sangat dihargai 👍

@squallstar kirimi saya email melalui formulir kontak di situs saya dan saya akan memberikan demo kepada Anda nanti hari ini :) http://rorymorris.co.uk

@squallstar Ini sebenarnya bukan solusi, tetapi semacam solusi. Kekurangannya adalah: Performa, hasil memiliki ketergantungan perangkat, zoom tidak terbatas.

Kinerja sangat ditingkatkan dengan menggunakan scrolling dan panning asli, dibandingkan dengan menggunakan JavaScript untuk melakukan tugas tersebut. Tingkat zoom maksimum mudah dikonfigurasi dengan tag meta viewport, dan siapa sih yang menginginkan zoom tanpa akhir pada gambar raster? Omong-omong, pustaka "JS-ImageResizer" yang tampak hebat! @Tokopedia

Performa lebih merupakan tebakan. Katakanlah menggunakan iPhone Plus dengan lebar lanskap @ 2208px. Sekarang Anda akan memiliki Canvas 6624px. Bergantung pada kompleksitas PDF dan jumlah halaman, Anda mungkin memiliki 3 kanvas 6000px yang dirender dengan teks HTML, grafik, dll.

Saya kira solusi Anda bagus untuk banyak orang. Tetapi seperti yang Anda jelaskan, ini lebih merupakan zoom palsu daripada yang sebenarnya memicu zoom dan rendering PDF.js :)

Benar, kinerja dari aspek itu tidak bagus. Dalam kasus penggunaan khusus saya untuk ini, saya harus merender 300+ halaman PDF dengan ukuran iPad (retina), serta memiliki kanvas gambar di atas masing-masing!

PDF.js akan merusak browser (iOS Safari) di sekitar 10 halaman PDF yang dirender, jadi pada akhirnya saya harus hanya menampilkan satu halaman PDF pada satu waktu dengan tombol sebelumnya / berikutnya. Tidak ideal! Dan saya setuju, fungsi zoom asli yang dibangun ke dalam PDF.js akan jauh lebih bagus.

checkout kamihq.com untuk contoh kerja pinch-zoom

@rorysmorris Saya telah mengirimkan email saya kemarin malam melalui formulir kontak, apakah Anda dapat mengirimkan contoh yang Anda bicarakan? :) terima kasih

Adakah yang bisa memiliki contoh yang berfungsi ( @rorysmorris , @ Rob - W, dll) tolong bagikan?

@rorysmorris Saya mencoba menghubungi Anda melalui situs web Anda. Jika ada yang memiliki contoh kerja ini, dapatkah Anda berbagi?

@ltullman @ hetalv985 Saya berhasil membuatnya bekerja menerapkannya sendiri, periksa inti saya di sini:

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
cukup tempelkan itu ke akhir viewer.html 👍 itu saja.

Terima kasih squallstar. Tapi kami tidak menggunakan viewer.html. Kami merender pdf di aplikasi seluler iOS kami di dalam tag div. Bagaimana kami menggunakan fitur ini dalam kasus tersebut? Apakah kita perlu menyertakan file penampil?

Jadi kami memiliki fungsi handleMouseWheel yang sangat mirip. Mengapa tidak menggunakan fungsi yang sama persis dengan gerakan sentuh atau palu js? Bukankah ini diperbaiki dalam 1-2 jam?

Sayangnya tidak semudah itu. Silakan lihat komentar saya sebelumnya di https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Kami perlu membatasi jumlah isyarat sentuh sehingga kanvas tidak dirender ulang pada setiap perubahan delta, yang merupakan masalah kinerja utama. Jika seseorang ingin mengerjakan ini, silakan kirimkan PR dan kami akan memeriksanya.

Jika itu satu-satunya masalah ... :)

Saya juga melihat pada "ctrl + mousewheel" itu menggulir ke posisi kursor seperti di Google Maps. Tetapi ini tidak akan berfungsi jika tidak ada scrollbar (yang merupakan default saat pemuatan halaman). Jadi agar ini terasa alami, kita harus membuat padding jika diperlukan untuk zoom pinch dan zoom roda mouse.

Tambahan yang bagus adalah jika zoom roda mouse dan zoom pinch akan menggunakan fungsi yang sama.

Komitmen Anda sudah terlihat bagus. Mungkin kinerja tidak lagi menjadi masalah, sudah lebih dari 3 tahun yang lalu. Tentu solusi terbaik adalah: start-pinch -> blurred zoom -> end-pinch -> benar-benar zoom pdf. Juga user-scalable=no tidak lagi berfungsi di iOS terbaru. Jadi kita mungkin harus preventDefault() juga.

Saya menginvestasikan banyak waktu untuk ini. Sebenarnya sepertinya mungkin tetapi ada beberapa masalah yang tidak dapat saya selesaikan:

  • hammer.js hanya bekerja pada pinchend (pinchmove selalu dibatalkan saat pdf.js memperbesar)
  • Saya tidak dapat menggulir dengan sempurna ke tengah pinchend meskipun saya menggunakan metode yang sama seperti mousewheel-zoom
  • Terkadang pusat tidak diatur dengan benar oleh hammer.js
  • Terkadang pinchend tidak dipanggil oleh hammer.js dan tidak ada zoom yang terjadi
  • Saya mencoba menambahkan transformasi css pada pinchmove (zoom css pada pinchmove, pdf js zoom pada pinchend) yang akan memberikan kinerja yang hebat tetapi sekali lagi saya tidak dapat menggulir dengan sempurna (posisi #viewer dengan terjemahan css)
  • hammer.js mencegah tindakan sentuhan lainnya (dalam kasus kami gulir halaman biasa) jadi saya harus memodifikasi hammer.js untuk hanya mencegah ketika 2 jari digunakan
  • (Sama untuk zoom roda mouse :) Jika tidak ada scrollbar (diperbesar sehingga Anda melihat seluruh dokumen) kami tidak bisa memposisikan (scroll) dokumen ke tengah pinch.

Mungkin semua ini dapat dipecahkan tetapi iOS 10 memungkinkan pembesaran halaman bahkan ketika dinonaktifkan dengan user-scalable=no . Jadi beberapa kali pinch preventDefault () tidak berfungsi dan seluruh halaman diperbesar. Ini akan menyebabkan masalah besar bagi pengguna akhir (satu-satunya cara untuk keluar adalah dengan mengetuk dua kali bilah alat).

@MickL Saya mencobanya. Saya dapat menghindari pembatalan "pinch zoom" dengan menambahkan properti CSS "pointer-events: none" ke kelas pdfViewer dan halaman (dan memanggil stopPropagation + preventDefault saat viewerContainer mengirimkan peristiwa sentuh ganda sehingga seluruh halaman tidak memperbesar iOS).

Saya mengalami masalah yang sama dengan yang Anda gambarkan tentang tidak adanya peristiwa posisi zoom yang sempurna ketika saya menggunakan metode roda mouse yang dimodifikasi (berikan skala berikutnya untuk diterapkan, "posisi tengah" atau target saat ini dan delta "posisi tengah" untuk mengetahui berapa banyak yang harus dipindahkan ke kiri, kanan, atas, bawah, dikelola oleh pdfViewer.container.scrollLeft dan pdfViewer.container.scrollTop). Tampaknya selalu ada kesalahan yang disebabkan mungkin oleh batas waktu yang membuat pemirsa tidak dapat merender pada setiap acara sentuh ganda.

Adakah petunjuk tentang di mana harus menerapkan transformasi skala CSS tersebut untuk menghindari rendering semuanya di setiap delta skala?

@betovidal Saya tahu sudah beberapa bulan sejak posting terakhir Anda. Sudahkah Anda membuat pembaruan untuk mendapatkan pinch-zooming agar berfungsi di PDF.js? Saya sedang mengerjakan proyek untuk pekerjaan yang membutuhkan ini.
Mungkin kita bisa bekerja sama untuk mencari tahu?

@squallstar Saya menguji solusi Anda di iOS dengan sangat singkat. Dan sejauh ini, ini berhasil untuk saya! Terima kasih telah membagikan solusi Anda 💯

@vuinguyen terima kasih! Saya senang itu berhasil juga untuk Anda;)

+1

Adakah harapan untuk mendapatkan kode

Pinch-zoom "rusak" di iOS sejak iOS 10. Bahkan jika semuanya diterapkan dengan sempurna Safari akan mengacaukan semuanya.

Apakah ini masalah khusus iOS? Apakah mungkin untuk melakukan pinch zoom pada PDF yang disajikan oleh pdfjs di Android?

Tergantung pada browsernya. Saya berasumsi bahwa hanya browser iOS yang mengabaikan "user-scalable = no".

Sekarang Anda harus menekan tombol plus / minus bahkan di ponsel untuk memperbesar dokumen. Ini sangat aneh terutama karena pinch-to-zoom juga aktif. Menurut saya, cara terbaik untuk menggunakan perangkat seluler adalah dengan merender pada ukuran "alami", dan membiarkan browser mengontrol zoom, mirip dengan halaman web.

Bagi saya, ini menjelaskan semuanya. Saya kira ini bukan tentang fitur spesifik dan lebih kepada pendekatan pengalaman seluler.

Saya berasumsi bahwa hanya browser iOS yang mengabaikan "user-scalable = no".

Benar.

Saya melihat bahwa "Box Content Preview" (yang menggunakan PDFJS untuk menampilkan PDF) melakukan implementasi yang baik untuk ini. Ini adalah Codepen pemirsa mereka:

https://codepen.io/box-platform/pen/rmZdjm

Dan ini adalah permintaan tarik untuk perbaikan mereka:

https://github.com/box/box-content-preview/pull/567

Saya pikir mungkin seseorang bisa membuat sesuatu yang mirip untuk PDFJS, berdasarkan solusinya. Saya akan mencoba menerapkannya sendiri dan memposting kode jika saya melakukannya. Saya akan menjadi hebat jika orang lain (yang mungkin memiliki lebih banyak pengalaman daripada saya) juga dapat berkolaborasi dan mencobanya!

@ amurillo17 terima kasih untuk tautannya. Solusi Box terlihat fantastis. Saya ingin melihat sesuatu seperti ini bekerja dengan pdfjs. Harap beri tahu kami kemajuan Anda!

Apakah ada solusi yang baik untuk masalah ini?

Ada pembaruan untuk ini? Akan menjadi fitur yang bagus untuk dimiliki!

ada pembaruan? Terima kasih

Adakah cara sederhana untuk menambahkan fitur ini ke penampil yang sudah ada?

Adakah cara sederhana untuk menambahkan fitur ini ke penampil yang sudah ada?

Tidak.

@prohtex Hm, itu sangat menyedihkan. Saya berharap, fitur seperti itu akan ditambahkan segera setelah bertahun-tahun.

@prohtex Hm, itu sangat menyedihkan. Saya berharap, fitur seperti itu akan ditambahkan segera setelah bertahun-tahun.

Itu hanya akan ditambahkan ketika seseorang meningkatkan dan mengintegrasikan kode ke dalam PR (sayangnya bukan saya), dan bahkan kemudian, itu bisa memakan waktu bertahun-tahun.

Saya memiliki solusi, tetapi ini "khusus Android" karena saya tidak peduli tentang iOS di addon "Firefox untuk Android" saya:
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Makefile saya hanya menambahkan ini ke "web / viewer.js". Ini mendaftar ke acara sentuh dan menerjemahkan gerakan mencubit menjadi klik tombol.

Saya memiliki solusi, tetapi ini "khusus Android" karena saya tidak peduli tentang iOS di addon "Firefox untuk Android" saya:

Ini berfungsi di iPad saya juga, tetapi terasa agak lamban dan tidak terlalu alami. Ini memperbesar satu langkah setelah setiap cubitan. Jadi Anda harus melepaskan jari untuk memperbesar dan tidak peduli seberapa jauh jarak Anda mencubit. Apakah ini perilaku normal, atau hanya bug khusus perangkat? Terima kasih, karena ini adalah langkah ke arah yang benar.

Ini berfungsi di iPad saya juga, tetapi terasa agak lamban dan tidak terlalu alami. Ini memperbesar satu langkah setelah setiap cubitan. Jadi Anda harus melepaskan jari untuk memperbesar dan tidak peduli seberapa jauh jarak Anda mencubit. Apakah ini perilaku normal, atau hanya bug khusus perangkat? Terima kasih, karena ini adalah langkah ke arah yang benar.

Melihat kodenya, ini bukanlah solusi yang layak atau bahkan solusi yang bagus. Semua yang dilakukan ini hanyalah mengamati event zoom dan mensimulasikan klik pada tombol [-] [+] dengan jQuery.

@prohtex Tepat. Jika Anda mencobanya, itu melakukan sesuatu, tetapi tidak berhasil sama sekali.

Seperti yang saya katakan: Tidak sempurna tetapi lebih baik daripada tidak sama sekali.
Setidaknya bagi saya lebih mudah melakukan gerakan mencubit daripada menekan tombol zoom kecil di layar ponsel kecil. Itu membuat gerakan berfungsi yang diharapkan oleh setiap pengguna perangkat seluler.

Ini berfungsi di iPad saya juga, tetapi terasa agak lamban dan tidak terlalu alami. Ini memperbesar satu langkah setelah setiap cubitan. Jadi Anda harus melepaskan jari untuk memperbesar dan tidak peduli seberapa jauh jarak Anda mencubit. Apakah ini perilaku normal, atau hanya bug khusus perangkat? Terima kasih, karena ini adalah langkah ke arah yang benar.

Itu menyentuh tombol. "Pembesaran alami" tidak dimungkinkan dengan pendekatan sederhana ini dan saya tidak ingin terlalu banyak mengacaukan PDF.js. Ini bukan tujuan Addon saya.

Tetapi harus dimungkinkan untuk melakukan beberapa penekanan tombol tergantung pada seberapa jauh jari telah bergerak. Saya akan mencobanya.

Melihat kodenya, ini bukanlah solusi yang layak atau bahkan solusi yang bagus. Semua yang dilakukan ini hanyalah mengamati event zoom dan mensimulasikan klik pada tombol [-] [+] dengan jQuery.

Saya terbuka untuk saran, tetapi karena ini adalah bagian dari Addon yang hanya ingin membuat PDF.js dapat digunakan sebagai penampil PDF di dalam Firefox, saya tidak akan melakukan modifikasi mendalam.

BTW: Tidak ada satu baris jQuery di kode saya. Ini adalah JavaScript mentah.

Seharusnya sebenarnya mungkin untuk melakukan langkah zoom sambil menggerakkan jari ...
Saya akan mencoba melakukan beberapa perbaikan lagi, tetapi satu-satunya jalur komunikasi, yang akan saya gunakan, adalah dua tombol yang akan saya kontrol dari jarak jauh. Dengan cara ini kode saya tidak mengganggu PDF.js.

BTW: Tidak ada satu baris jQuery di kode saya. Ini adalah JavaScript mentah.

Saya berdiri dikoreksi. Berharap solusi yang matang segera.

Cara untuk melakukannya adalah dengan menggunakan transformasi css sambil melakukan pinch-zoom. Selain itu gerakan jari perlu diterapkan tidak hanya pada zoom. Kemudian pada pinch-zoom-end Anda dapat mengatur ulang transformasi css dan menerapkan zoom aktual dan menggulir ke pdf.js.

PS Menggunakan jQuery di dalam proyek non-jQuery sudah tampak seperti praktik yang buruk bagi saya.

PS Menggunakan jQuery di dalam proyek non-jQuery sudah tampak seperti praktik yang buruk bagi saya.

Di mana @ M-Reimer menggunakan JQuery? Seperti yang sudah dia nyatakan, solusinya hanya menggunakan Javascript biasa.

Ya .. saya buruk. Intinya, solusi ini tidak berfungsi dengan baik.

Diperbarui sehingga jarak antara jari mengubah jumlah zoom:
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Tidaklah mungkin untuk memperbesar saat menggerakkan jari karena, untuk beberapa alasan, pembesaran dan penggambaran ulang yang sebenarnya menyebabkan peristiwa sentuh entah bagaimana "berakhir".
Sekali lagi: Lebih baik daripada tidak menangani isyarat sama sekali.

@ M-Reimer Terima kasih banyak atas pekerjaan Anda. Setidaknya, ini merupakan peningkatan dibandingkan versi terakhir. Mungkin seseorang menemukan solusi untuk membuatnya menggambar ulang sambil memperbesar. Atau dimungkinkan untuk memperbesar sementara menggunakan transformasi css dan kemudian menggambar ulang pada akhirnya setelah isyarat sentuh berakhir.

@anvaka Menyelidiki kasus ini dan sepertinya ada solusi yang agak sederhana . Sayangnya saat ini saya tidak punya waktu untuk mengujinya, tapi mungkin ada yang ingin mencobanya.

Saya membuat versi berdasarkan solusi @squallstar yang juga menggunakan transformasi css selama gerakan pinch untuk memberikan lebih banyak umpan balik pengguna. Rendering hanya dilakukan di touchend. Ini tidak sempurna, ada beberapa masalah kecil dengan posisi scroll setelah rendering, tetapi mungkin seseorang dapat menggunakannya sebagai permulaan.

https://gist.github.com/jsprpalm/12217feab2f1acc14 E5E5E5e8508291619e

Apakah masih belum ada perbaikan untuk masalah ini? Saya ingin menggunakan pdf.js di perangkat seluler tetapi tanpa kemampuan untuk memperbesarnya, sebagian besar tidak berguna di layar yang lebih kecil.

Saya membuatnya bekerja tanpa menggunakan hammer.js tetapi karena ini untuk proyek pelanggan saya tidak dapat membagikan kodenya. Saya menerapkan pinch and doubletap dan memperbesar dengan css dan pada pinchend saya memperbesar pdf.js. Beberapa elemen perlu menyetel lebar / tinggi dan beberapa dapat diubah dengan css-transform. Juga saat memperbesar jam tangan gulir pdf.js viewer.js harus dicegah. Butuh banyak waktu bagi saya, tetapi pada akhirnya berhasil dengan baik.

Apakah masih belum ada perbaikan untuk masalah ini? Saya ingin menggunakan pdf.js di perangkat seluler tetapi tanpa kemampuan untuk memperbesarnya, sebagian besar tidak berguna di layar yang lebih kecil.

Hingga pengembang berpengalaman dengan langkah-langkah basis kode pdf.js untuk menawarkan solusi, terserah setiap orang yang menerapkan pdf.js untuk menyusun sesuatu bersama-sama. Sepertinya tidak menjadi prioritas besar untuk proyek ini.

Inilah PR yang dapat diintegrasikan tanpa terlalu banyak kesulitan:

https://github.com/box/box-content-preview/pull/567

https://gist.github.com/jsprpalm/12217feab2f1acc14 E5E5E5e8508291619e

@jsprpalm terima kasih bekerja sangat baik perlu diperbaiki, tolong seseorang membantu untuk memperbaikinya

@aidrouge https://twitter.com/larsneo/bb75616e9426ae58950e8c84110206

Saya telah menambahkan yang ini ke addon penampil PDF saya. Sepertinya bekerja dengan cukup baik.
https://addons.mozilla.org/android/addon/android-pdf-js/

Edit: bekerja untuk saya

Bagi saya setting kerja lebih natural ini:

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0"
    />

Bagaimana cara mengatur zoom minimum? Saya bisa memperkecil gambar sedemikian rupa sehingga berubah menjadi titik.

Saya memiliki pertanyaan yang sama dengan @KazNoobiys.
skala minimum pada viewport tidak mempengaruhi zooming

Saya sedang mengerjakan pekerjaan lain: lapisan css transparan yang melapisi pdf.js untuk menangani berbagai fungsi gesek. Bagian overlay berfungsi sekarang, tetapi saya tidak tahu fungsi apa yang harus dipanggil.
jika (gesek == 'kiri') ????
Fungsi apa yang akan saya panggil untuk melanjutkan ke halaman berikutnya atau mencadangkan ke halaman sebelumnya atau zoom?

hemat waktu & hidup Anda, edit file .html Anda seperti ini

// delete the 'maximum-scale'
<meta name="viewport" content="width=device-width, initial-scale=1">

misalnya. https://github.com/mozilla/pdf.js/blob/master/web/viewer.html#L26

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

liuzhen2008 picture liuzhen2008  ·  4Komentar

jigskpatel picture jigskpatel  ·  3Komentar

THausherr picture THausherr  ·  3Komentar

aaronshaf picture aaronshaf  ·  3Komentar

AlexP3 picture AlexP3  ·  3Komentar