Pdf.js: Utilisez un zoom plus naturel sur mobile

C'est ce que nous voulions faire, mais pour V1, le pincement pour zoomer posait des problèmes, nous avons donc dû utiliser les boutons de zoom.

Pouvez-vous élaborer sur les problèmes? Je pense que nous pourrions probablement les prioriser pour vous afin que PDF.js fonctionne bien.

Je ne pense vraiment pas que vous souhaitiez que le navigateur fasse le zoom dans ce cas. Si pdf.js rend un document à 800x600 et que vous effectuez un zoom avant, le navigateur continuera simplement à afficher ce contenu 800x600 à une nouvelle résolution plus élevée qui peut ou non ressembler à de la merde en fonction de la résolution de l'appareil et beaucoup vous avez zoomé. (Je suppose que pdf.js utilise toujours canvas pour le rendu et non svg?)

@Snuffleupagus @timvandermeij L' un de vous est-il intéressé à travailler là-dessus? Il semble que cela ne devrait pas être trop difficile d'utiliser la bibliothèque partagée dans gaia https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js

@brendandahl Je vais certainement le mettre sur ma liste de choses à faire et commencer à l'expérimenter bientôt. https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 semble avoir un bon exemple, car 'transform' est utilisé pour les événements de pincement à 2 doigts. Ce serait vraiment génial si le pincement pour zoomer fonctionnait, car il est utilisé assez souvent sur mobile.

Je travaille là-dessus. Les utilisateurs intéressés peuvent garder un œil sur https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom pour les progrès. Il saisit déjà la commande pincer pour zoomer sur ma tablette et mon téléphone, mais la précision doit être améliorée, ainsi que le re-rendu réel (je devrai trouver un moyen de calculer la nouvelle échelle avec l'ancienne échelle et le nouveau point médian, ou d'une autre manière).

@timvandermeij Une chose que nous devrons peut-être faire avant de mettre en œuvre ceci est d'améliorer le zoom. Nous avons parlé d'abord d'utiliser simplement les transformations css pour mettre à l'échelle le canevas, puis de commencer le re-rendu, puis une fois le re-rendu terminé, afficher le nouveau canevas.

Je crois fermement que la meilleure solution ici va être celle qui repose sur le compositeur du navigateur pour faire le zoom transitoire (l'animation pendant le pincement ou le double tap), puis laissez simplement pdf.js redessiner à la nouvelle résolution. Le plus triste ici est que pour le moment, le contenu est inconscient des modifications de zoom, et je ne pense pas que le redimensionnement du canevas à la nouvelle résolution fonctionnera. Nous devrons peut-être améliorer les spécifications du canevas pour gérer cela.

J'ai eu du succès avec hammer.js. J'ai autorisé le pincement "natif" du navigateur (qui conduit à un PDF flou) et au pincement je redessine le canevas PDF, avec scale = scale * zoom et donne au canevas le css "transform: scale (1 / zoom)". Donc, tout sera au même endroit (en particulier le texte et les ancres). Ça a l'air bien.

@skruse J'ai préparé il y a quelque temps un patch pour implémenter pinch to zoom (voir # 3708), également avec Hammer.js, mais je n'ai pas encore réussi à le faire fonctionner correctement sur les appareils mobiles / tablettes. Les mouvements de pincement ont causé de nombreux problèmes de performances et de stabilité. Cela vous dérange-t-il de partager votre implémentation avec nous? Sinon, pourriez-vous créer une pull request avec votre pincement pour zoomer l'implémentation? Peut-être qu'il pourrait remplacer le mien s'il fonctionne plus couramment sur les appareils mobiles / tablettes. :)

Hey skruse, comment as-tu pu calculer le taux de zoom à la fin du zoom?

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

Et j'ai aussi des problèmes de performances: il ne faut pas zoomer «trop loin» sur un appareil mobile, en termes de paramètre «échelle». Je suppose que 2 ou 3 est le maximum.

+2 pour cela

Quelqu'un a une solution pour ce problème vieux de 2 ans?

À ma connaissance, rien n’a été fait à ce sujet. Je me réfère à mon commentaire précédent sur https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Nous invitons tout le monde à soumettre un PR pour cela une fois qu'il y aura un code de travail.

J'adorerais voir une solution pour cela. Pour le moment, c'est la seule chose qui m'empêche d'utiliser pdf.js

:(

Un zoom pincé serait génial! J'ai trouvé ce plugin jquery qui utilise pdf.js et a un zoom par pincement et des pages de balayage. http://touchpdf.net/demo/index.htm Mais ce serait bien s'il était construit en pdf.js dès le début :-)

+1 J'adorerais voir ceci ici.

+1, est-ce que l'exemple ailleurs qui utilise hammer.js pour capturer l'événement puis appeler les fonctions de zoom pdf.js ne serait pas une méthode relativement "propre"?

@sporkman ce que j'ai fait à la fin était de rendre la toile vraiment grande, puis d'utiliser le zoom du navigateur natif pour permettre le zoom (mon application a été conçue pour les appareils tactiles). je peux partager la source si nécessaire.

@rorysmorris comment avez-vous réussi à contourner la désactivation du zoom natif du navigateur lors du pincement lors du défilement? J'ai également implémenté hammer.js sur pdf.js mais je ne peux pas contourner ce problème particulier

Avez-vous essayé d'utiliser la propriété CSS touch-action ?
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Le 5 octobre 2016 à 15 h 15, "toplay3" [email protected] a écrit:

@rorysmorris https://github.com/rorysmorris comment avez-vous réussi à obtenir
autour de la désactivation du zoom du navigateur natif lors du pincement lors du défilement? j'ai
a également implémenté hammer.js sur pdf.js mais ne peut pas contourner ce problème
problème

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/mozilla/pdf.js/issues/2582#issuecomment -251670785,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ABTUT83E287dv4LSs4T_TGnzwe8yqCMYks5qw6LmgaJpZM4AXvZ2
.

@ Rob - W
wow génie! fonctionne parfaitement maintenant! Merci beaucoup!

Quand ce problème est-il prévu d'être mis en œuvre? Cela fait un certain temps depuis la publication de ce numéro. Inutile de dire +1!

Je vérifie également ce numéro chaque semaine depuis un an maintenant. Ce serait génial de l'avoir dans le noyau ou comme addon avec hammer js.

Pour être plus constructif sur ce fil, voici les exigences pour l'interface utilisateur (si quelqu'un veut vraiment aider et accélérer la résolution du problème) et il n'y a rien de spécifique à PDF.js:

• pour zoomer et faire un panoramique sur un ensemble de DIV (avec différentes tailles) empilés verticalement
• ne pas permettre à l'utilisateur de se perdre dans la fenêtre à différentes échelles
• détecter et informer quand une visibilité div ou une échelle visible change.

Ce dernier point est important car nous ne voulons pas peindre toutes les pages à une résolution maximale sur des appareils de faible puissance. Si quelqu'un veut avoir un prototype, trouvez-moi à l'IRC, je vais vous aider à accrocher PDFPageView pour la visibilité et les événements d'échelle. Dois-je également définir 5-good-beginner-bug?

Je suis d'accord que ce serait un bon bogue pour les débutants, donc je le qualifie comme tel.

Ce n'est pas seulement pour les mobiles, je reçois également des demandes de fonctionnalités pour prendre en charge le zoom à deux doigts du trackpad (sur Mac).

D'après ma brève enquête, j'ai trouvé qu'il n'y avait pas encore de moyen multi-navigateurs pour prendre en charge les gestes de zoom.

• Safari a des événements de geste spécifiques: https://developer.apple.com/reference/webkitjs/gestureevent
• Le code du module complémentaire Firefox a accès aux événements gestuels: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mouse_gesture_events
• Quelques discussions de bugzilla sur la conversion des événements de pincement en ctrl-wheel (avec entrée et références à d'autres navigateurs): https://bugzilla.mozilla.org/show_bug.cgi?id=1052253

+1

@ toplay3 et @ Rob - W Qu'avez-vous fait pour le faire fonctionner? Ajouter "action tactile: auto;"? À quoi? Et qu'avez-vous fait d'autre? Merci!

Salut tout le monde, comme la plupart d'entre vous, je suis intéressé à faire fonctionner le pincement pour zoomer, est-ce que quelqu'un a pu le faire, même en utilisant des bibliothèques externes comme hammer? Si vous l'avez fait, quelle est la configuration? @rorysmorris @ toplay3 @ Rob - W merci

👍

@rorysmorris un conseil sur la question ci-dessus? Merci :)

Salut @squallstar - au début, j'ai essayé d'utiliser une bibliothèque de pincement et de zoom JS pour gérer cela pour moi, mais j'ai trouvé quelques problèmes. Il n'a pas zoomé comme je le voulais, c'est-à-dire qu'il permettrait au canevas PDF de sortir complètement de l'écran, alors que je ne voulais jamais que les bords soient éloignés du bord de l'écran, si cela a du sens. En fin de compte, je viens d'utiliser le zoom natif intégré au navigateur mobile pour pincer / zoomer / naviguer. J'ai configuré PDF.js pour rendre le PDF à 3x la taille de pixel dans laquelle il était affiché, puis mis à l'échelle avec CSS, afin qu'il reste assez net lors d'un zoom avant. Si vous avez besoin d'aide, je pourrais vous montrer un exemple fonctionnel la mise en oeuvre.

@rorysmorris merci, ce serait bien si vous me

@squallstar m'envoie un e-mail via le formulaire de contact sur mon site et je vous enverrai une démo plus tard aujourd'hui :) http://rorymorris.co.uk

@squallstar Ce n'est pas vraiment une solution mais une sorte de contournement. Les inconvénients sont: les performances, le résultat dépend des périphériques, le zoom n'est pas sans fin.

Les performances sont considérablement améliorées en utilisant le défilement et le panoramique natifs, par opposition à l'utilisation de JavaScript pour effectuer ces tâches. Le niveau de zoom maximal est facilement configurable avec une balise de méta-fenêtre, et qui veut de toute façon un zoom sans fin sur une image pixellisée? Grande bibliothèque "JS-ImageResizer" au fait! @MickL

La performance était plus une supposition. Disons en utilisant un iPhone Plus en paysage @ 2208px largeur. Vous auriez maintenant un canevas de 6624 pixels. En fonction de la complexité du PDF et du nombre de pages, vous pouvez avoir 3 canevas de 6000 pixels avec du texte HTML, des graphiques, etc.

Je suppose que votre solution est idéale pour beaucoup de gens. Mais comme vous l'avez décrit, il s'agit plus d'un faux zoom qu'il ne déclenche réellement le zoom et le rendu PDF.js :)

Certes, les performances de cet aspect ne sont pas géniales. Dans mon cas d'utilisation particulier, je devais rendre plus de 300 pages PDF au format iPad (rétine), ainsi qu'une toile de dessin au-dessus de chacun!

PDF.js plantait le navigateur (iOS Safari) à environ 10 pages PDF rendues, donc à la fin je devais n'afficher qu'une seule page PDF à la fois avec les boutons précédent / suivant. Pas idéal! Et je suis d'accord, la fonctionnalité de zoom native intégrée à PDF.js aurait été beaucoup plus agréable.

consultez kamihq.com pour un exemple de travail de zoom par pincement

@rorysmorris Je vous ai envoyé mon email hier soir via le formulaire de contact, est-ce que vous pouvez m'envoyer l'exemple dont vous parliez? :) Merci

Quelqu'un qui a un exemple de travail ( @rorysmorris , @ Rob - W, etc.) peut-il partager?

@rorysmorris J'ai essayé de vous contacter via votre site Web. Si quelqu'un a un exemple concret de ceci, pouvez-vous s'il vous plaît partager?

@ltullman @ hetalv985 J'ai réussi à le faire fonctionner, à l'implémenter moi-même, vérifiez mon essence ici:

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
collez simplement cela à la fin de viewer.html - c'est tout.

Merci squallstar. Mais nous n'utilisons pas le viewer.html. Nous rendons le pdf dans notre application mobile iOS à l'intérieur d'une balise div. Comment utilisons-nous cette fonctionnalité dans ce cas? Doit-on inclure les fichiers de la visionneuse?

Nous avons donc la fonction handleMouseWheel qui est très similaire. Pourquoi ne pas utiliser exactement la même fonction avec le geste tactile ou le marteau js? N'est-ce pas résolu en 1-2 heures alors?

Malheureusement, ce n'est pas si simple. Veuillez vous référer à mon commentaire précédent sur https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Nous devons limiter la quantité de gestes tactiles afin que le canevas ne soit pas rendu à nouveau à chaque changement delta, ce qui est un problème de performances majeur. Si quelqu'un est prêt à travailler là-dessus, n'hésitez pas à soumettre un PR et nous l'examinerons.

Si c'est le seul problème ... :)

J'ai également remarqué que sur "ctrl + molette de la souris", il défile jusqu'à la position du curseur comme sur Google Maps. Mais cela ne fonctionnera pas s'il n'y a pas de barres de défilement (ce qui est par défaut lors du chargement de la page). Donc, pour que cela semble naturel, nous devons créer un rembourrage si nécessaire pour le zoom par pincement et le zoom avec la molette de la souris.

Un ajout intéressant serait que le zoom à molette de la souris et le zoom par pincement utilisent la même fonction.

Votre commit semble déjà bon. Peut-être que la performance n'est plus un problème, il y a plus de 3 ans. Bien sûr, la meilleure solution serait: start-pinch -> zoom flou -> fin-pinch -> vraiment zoomer pdf. De plus, user-scalable=no ne fonctionne plus sur le dernier iOS. Il se peut donc que nous devions aussi preventDefault() .

J'ai investi beaucoup de temps là-dedans. En fait, cela semble possible, mais il y a plusieurs problèmes que je n'ai pas pu résoudre:

• hammer.js ne fonctionne que sur pinchend (pinchmove est toujours annulé lorsque pdf.js effectue un zoom)
• Je ne pouvais pas faire défiler parfaitement jusqu'au centre du pincement même si j'ai utilisé la même méthode que le zoom avec la molette de la souris
• Parfois, le centre n'est pas réglé correctement par hammer.js
• Parfois, pinchend n'est pas appelé par hammer.js et aucun zoom ne se produit
• J'ai essayé d'ajouter une transformation css sur pinchmove (zoom css sur pinchmove, pdf js zoom sur pinchend) ce qui donnerait de bonnes performances mais encore une fois je n'ai pas pu faire défiler parfaitement (position #viewer avec css translate)
• hammer.js empêche toute autre action tactile (dans notre cas le défilement de page normal), j'ai donc dû modifier hammer.js pour empêcher uniquement lorsque 2 doigts sont utilisés
• (Idem pour le zoom de la molette de la souris :) S'il n'y a pas de barres de défilement (zoom arrière pour voir tout le document), nous ne pouvons pas positionner (faire défiler) le document au centre du pincement.

Tout cela peut probablement être résolu, mais iOS 10 permet le zoom de page même lorsqu'il est désactivé avec user-scalable=no . Ainsi, plusieurs fois, le pinch preventDefault () ne fonctionne pas et la page entière est agrandie. Cela entraînerait un problème majeur pour l'utilisateur final (le seul moyen de sortir est de double-cliquer sur la barre d'outils).

@MickL J'ai essayé. J'ai pu éviter l'annulation du "pincement de zoom" en ajoutant la propriété CSS "pointer-events: none" aux classes pdfViewer et page (et en appelant stopPropagation + preventDefault lorsque viewerContainer distribue des événements double touch afin que la page entière ne zoome pas sur iOS).

J'ai le même problème que vous décrivez de ne pas avoir l'événement de position de zoom parfait lorsque j'utilise la méthode de la molette de souris modifiée (passer la prochaine échelle à appliquer, la "position médiane" actuelle ou la cible et le delta de la "position médiane" pour savoir combien se déplacer vers la gauche, la droite, le haut, le bas, géré par pdfViewer.container.scrollLeft et pdfViewer.container.scrollTop). Il semble y avoir toujours une erreur introduite peut-être par le délai d'expiration qui empêche le spectateur de rendre sur chaque événement de double contact.

Un indice sur où appliquer ces transformations d'échelle CSS pour éviter de tout rendre sur chaque delta d'échelle?

@betovidal Je sais que cela fait quelques mois depuis votre dernier message. Avez-vous fait des mises à jour pour faire fonctionner le zoom par pincement dans PDF.js? Je travaille sur un projet pour un travail qui l'exige.
Peut-être pourrions-nous travailler ensemble pour trouver quelque chose?

@squallstar J'ai testé très brièvement votre solution sur iOS. Et jusqu'à présent, ça marche pour moi! Merci d'avoir partagé votre solution 💯

@vuinguyen merci! Je suis content que cela a fonctionné pour toi aussi;)

+1

Un espoir d 'intégrer le code de @squallstar dans un PR? Actuellement, si un utilisateur tente de pincer et de zoomer sur un appareil mobile, il est souvent «bloqué» hors du défilement et doit recharger la page simplement pour naviguer plus loin. S'appuyer sur les minuscules boutons «+» et «-» pour naviguer est plutôt contre-intuitif pour un spectateur mobile en 2018.

Le pincement-zoom est "cassé" sur iOS depuis iOS 10. Même si tout est parfaitement mis en œuvre, Safari va tout gâcher.

Est-ce un problème spécifique à iOS? Est-il possible de pincer en zoom un PDF servi par pdfjs sur Android?

Dépend du navigateur. Je suppose que seuls les navigateurs iOS ignorent "user-scalable = no".

Pour le moment, vous devez appuyer sur les boutons plus / moins même sur mobile pour agrandir le document. C'est vraiment étrange d'autant plus que le pincement pour zoomer est également actif. Je pense que la meilleure façon d'aller sur mobile est peut-être de rendre à une taille "naturelle", et de laisser le navigateur contrôler le zoom, comme une page Web.

Pour moi, cela dit tout. Je suppose qu'il s'agit moins d'une fonctionnalité spécifique que d'une approche de l'expérience mobile.

Je suppose que seuls les navigateurs iOS ignorent "user-scalable = no".

Correct.

J'ai vu que "Box Content Preview" (qui utilise PDFJS pour afficher les PDF) fait une bonne implémentation pour cela. Ceci est un Codepen de leur spectateur:

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

Et voici la pull request pour leur correctif:

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

J'ai pensé que quelqu'un pourrait peut-être faire quelque chose de similaire pour PDFJS, en fonction de sa solution. Je vais essayer de l'implémenter moi-même et poster le code si je le fais. Je serai génial si quelqu'un d'autre (qui a probablement plus d'expérience que moi) peut aussi collaborer et l'essayer!

@ amurillo17 merci pour le lien. La solution Box est fantastique. J'adorerais voir quelque chose comme ça travailler avec pdfjs. Veuillez nous tenir au courant de vos progrès!

Y a-t-il une bonne solution à ce problème?

Des mises à jour pour cela? Ce serait une excellente fonctionnalité à avoir!

les mises à jour ? Merci

Existe-t-il des moyens simples d'ajouter cette fonctionnalité à la visionneuse existante?

Existe-t-il des moyens simples d'ajouter cette fonctionnalité à la visionneuse existante?

Non.

@prohtex Hm, c'est assez triste. J'espère qu'une telle fonctionnalité sera ajoutée peu après toutes ces années.

@prohtex Hm, c'est assez triste. J'espère qu'une telle fonctionnalité sera ajoutée peu après toutes ces années.

Il ne sera ajouté que lorsque quelqu'un interviendra et intégrera du code dans un PR (pas moi, malheureusement), et même dans ce cas, cela pourrait prendre des années.

J'ai une solution de contournement, mais c'est "Android uniquement" car je ne me soucie pas d'iOS dans mon addon "Firefox pour Android":
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Mon Makefile ajoute simplement ceci à "web / viewer.js". Il enregistre les événements tactiles et traduit les gestes de pincement en clics de bouton.

J'ai une solution de contournement, mais c'est "Android uniquement" car je ne me soucie pas d'iOS dans mon addon "Firefox pour Android":

Cela fonctionne également sur mon iPad, mais cela semble un peu lent et pas très naturel. Il effectue un zoom d'un pas après chaque pincement. Vous devez donc relâcher les doigts pour le faire zoomer et peu importe la distance que vous avez pincée. Est-ce le comportement normal ou simplement un bogue spécifique à l'appareil? Merci quand même, car c'est un pas dans la bonne direction.

Cela fonctionne également sur mon iPad, mais cela semble un peu lent et pas très naturel. Il effectue un zoom d'un pas après chaque pincement. Vous devez donc relâcher les doigts pour le faire zoomer et peu importe la distance que vous avez pincée. Est-ce le comportement normal ou simplement un bogue spécifique à l'appareil? Merci quand même, car c'est un pas dans la bonne direction.

En regardant le code, ce n'est pas une solution viable ni même une bonne solution de contournement. Tout cela fait est de surveiller les événements de zoom et simuler en cliquant sur les boutons [-] [+] avec jQuery.

@prohtex Exactement. Si vous l'essayez, cela fait quelque chose, mais cela ne fonctionne pas du tout.

Comme je l'ai dit: pas parfait mais mieux que rien.
Au moins pour moi, il est plus facile de faire le geste de pincement que d'appuyer sur un petit bouton de zoom sur un petit écran mobile. Il fait fonctionner les gestes que chaque utilisateur d'appareil mobile s'attend à travailler.

Cela fonctionne également sur mon iPad, mais cela semble un peu lent et pas très naturel. Il effectue un zoom d'un pas après chaque pincement. Vous devez donc relâcher les doigts pour le faire zoomer et peu importe la distance que vous avez pincée. Est-ce le comportement normal ou simplement un bogue spécifique à l'appareil? Merci quand même, car c'est un pas dans la bonne direction.

Il frappe les boutons. Le "zoom naturel" n'est pas possible avec cette approche simple et je ne veux pas trop jouer avec PDF.js. Ce n'est pas le but de mon Addon.

Mais il devrait être possible de faire plusieurs pressions sur les boutons en fonction de la distance parcourue par les doigts. J'essaierai ça.

En regardant le code, ce n'est pas une solution viable ni même une bonne solution de contournement. Tout cela fait est de surveiller les événements de zoom et simuler en cliquant sur les boutons [-] [+] avec jQuery.

Je suis ouvert aux suggestions, mais comme cela fait partie d'un addon qui veut juste rendre PDF.js utilisable comme visionneuse PDF dans Firefox, je ne ferai pas de modifications profondes.

BTW: Il n'y a pas une seule ligne de jQuery dans mon code. C'est du JavaScript brut.

Il devrait être effectivement possible de faire les étapes de zoom en déplaçant les doigts ...
J'essaierai de faire quelques améliorations supplémentaires, mais le seul chemin de communication que j'utiliserai, ce sont les deux boutons que je contrôlerai à distance. De cette façon, mon code n'interfère pas avec PDF.js.

BTW: Il n'y a pas une seule ligne de jQuery dans mon code. C'est du JavaScript brut.

Je me suis trompé. En espérant une solution mature bientôt.

Pour ce faire, utilisez la transformation css tout en pinch-zoom. Le mouvement des doigts doit également être appliqué, pas seulement le zoom. Ensuite, à la fin du pincement-zoom, vous pouvez réinitialiser la transformation css et appliquer le zoom réel et faire défiler jusqu'à pdf.js.

PS Utiliser jQuery dans un projet non jQuery me semble déjà une mauvaise pratique.

PS Utiliser jQuery dans un projet non jQuery me semble déjà une mauvaise pratique.

Où @ M-Reimer utilise-t-il JQuery? Comme il l'a déjà dit, sa solution de contournement n'utilise que du Javascript brut.

Ouais ... mon mal. Le fait est que cette solution ne fonctionne pas bien.

Mise à jour pour que la distance entre les doigts modifie la quantité de zoom:
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Il n'est pas possible de zoomer tout en déplaçant les doigts car, pour une raison quelconque, le zoom réel et le redessiner provoquent en quelque sorte la «fin» de l'événement tactile.
Encore une fois: Mieux vaut ne pas manipuler du tout le geste.

@ M-Reimer Merci beaucoup pour votre travail. Au moins, c'est une amélioration par rapport à la dernière version. Peut-être que quelqu'un trouve une solution pour le faire redessiner en zoomant. Ou il peut être possible de zoomer temporairement à l'aide de transformations css, puis de le redessiner éventuellement après la fin du geste tactile.

@anvaka a examiné le cas et il semble qu'il y ait une solution plutôt simple . Malheureusement, je n'ai actuellement pas le temps de le tester, mais peut-être voudra-t-on l'essayer.

J'ai créé une version basée sur la solution @squallstar qui utilise également la transformation css pendant le mouvement de pincement pour donner plus de commentaires aux utilisateurs. Le rendu se fait uniquement sur touchend. Ce n'est pas parfait, il y a quelques petits problèmes avec le positionnement du défilement après le rendu, mais peut-être que quelqu'un pourrait l'utiliser comme point de départ.

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

N'y a-t-il toujours pas de solution à ce problème? J'aimerais utiliser pdf.js sur mobile, mais sans la possibilité de zoomer, il est généralement inutile sur des écrans plus petits.

Je l'ai fait fonctionner sans utiliser hammer.js mais comme c'était pour un projet client, je ne peux pas partager le code. J'ai implémenté pinch and doubletap et zoomé avec css et sur pinchend j'ai zoomé pdf.js. Certains éléments nécessitent de définir la largeur / hauteur et certains peuvent être transformés avec css-transform. De plus, lors du zoom, la surveillance de défilement de pdf.js viewer.js doit être empêchée. Cela m'a pris beaucoup de temps mais ça a plutôt bien fonctionné à la fin.

N'y a-t-il toujours pas de solution à ce problème? J'aimerais utiliser pdf.js sur mobile, mais sans la possibilité de zoomer, il est généralement inutile sur des écrans plus petits.

Jusqu'à ce qu'un développeur expérimenté avec la base de code pdf.js entreprenne de proposer une solution, il appartiendra à chaque personne qui implémente pdf.js de bricoler quelque chose. Cela ne semble pas être une grande priorité pour ce projet.

Voici un PR qui pourrait être intégré sans trop de difficulté:

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

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

@jsprpalm merci fonctionne très bien a besoin d'un correctif s'il vous plaît quelqu'un aide à réparer

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

J'ai ajouté celui-ci à mon addon de visionneuse PDF. Semble fonctionner plutôt bien.
https://addons.mozilla.org/android/addon/android-pdf-js/

Edit: fonctionne pour moi

Pour moi, je travaille plus naturellement:

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

Comment définir le zoom minimum? Je peux tellement réduire l'image qu'elle se transforme en point.

J'ai la même question que @KazysNoobiys.
l'échelle minimale de la fenêtre n'affecte pas le zoom

Je travaille sur un autre travail: une couche css transparente superposant pdf.js pour gérer diverses fonctionnalités de balayage. La partie superposition fonctionne maintenant, mais je ne sais pas quelles fonctions appeler.
if (swipe == 'gauche') ????
Quelle fonction dois-je appeler pour passer à la page suivante ou revenir à la page précédente ou zoomer?

économisez votre temps et votre vie, modifiez votre fichier .html comme ceci

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

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