Pdf.js: Verwenden Sie auf Mobilgeräten mehr natürliches Zoomen

Dies ist, was wir tun wollten, aber für V1 hatte die Prise zum Zoomen Probleme, so dass wir die Zoomtasten verwenden mussten.

Können Sie die Themen näher erläutern? Ich denke, wir könnten diese wahrscheinlich für Sie priorisieren, damit PDF.js gut funktioniert.

Ich glaube wirklich nicht, dass der Browser in diesem Fall zoomen soll. Wenn pdf.js ein Dokument mit 800 x 600 rendert und Sie das Zoomen einklemmen, wird der Browser diesen 800 x 600-Inhalt weiterhin mit einer neuen höheren Auflösung rendern, die je nach Auflösung des Geräts und wie möglicherweise wie Mist aussieht oder nicht viel hast du gezoomt. (Ich gehe davon aus, dass pdf.js immer noch Canvas zum Rendern verwendet und nicht svg?)

@Snuffleupagus @timvandermeij Ist einer von euch daran interessiert, daran zu arbeiten? Es scheint, dass es nicht zu schwierig sein sollte, die gemeinsam genutzte Bibliothek in gaia https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js zu verwenden

@brendandahl Ich werde es definitiv auf meine https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 scheint ein gutes Beispiel zu haben, da "Transformation" für 2-Finger-Pinch-Ereignisse verwendet wird. Es wäre wirklich großartig, wenn eine Prise Zoomen funktionieren würde, da es auf Mobilgeräten häufig verwendet wird.

Ich arbeite daran. Interessierte Benutzer können https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom für den Fortschritt im Auge behalten. Der Pinch-to-Zoom-Befehl auf meinem Tablet und Telefon wird bereits abgefangen, aber die Genauigkeit sowie das tatsächliche erneute Rendern müssen verbessert werden (ich muss einen Weg finden, um den neuen Maßstab mit dem alten Maßstab zu berechnen und der neue Mittelpunkt oder auf andere Weise).

@timvandermeij Bevor wir dies implementieren, müssen wir möglicherweise den Zoom verbessern. Wir haben darüber gesprochen, zuerst nur CSS-Transformationen zum Skalieren der Zeichenfläche zu verwenden, dann mit dem erneuten Rendern zu beginnen und nach dem erneuten Rendern die neue Zeichenfläche anzuzeigen.

Ich bin der festen Überzeugung, dass die beste Lösung hier eine sein wird, bei der der Compositor des Browsers den vorübergehenden Zoom (die Animation während des Kneifens oder doppelten Tippens) ausführt und dann pdf.js mit der neuen Auflösung neu zeichnen lässt. Der traurige Teil hier ist, dass der Inhalt derzeit keine Zoomänderungen wahrnimmt, und ich denke nicht, dass die Größenänderung der Leinwand auf die neue Auflösung funktionieren wird. Möglicherweise müssen wir die Canvas-Spezifikation verbessern, um dies zu handhaben.

Ich hatte einige Erfolge mit hammer.js. Ich habe die "native" Prise des Browsers zugelassen (was zu verschwommenem PDF führt) und beim Pinchend zeichne ich die PDF-Leinwand mit scale = scale * zoom neu und gebe der Leinwand die CSS "transform: scale (1 / zoom)". Alle befinden sich also am selben Ort (insbesondere Text und Anker). Sieht ordentlich aus.

@skruse Ich habe vor

Hey skruse, wie konnten Sie das Zoomverhältnis am Ende des Zooms berechnen?

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

Und ich habe auch Leistungsprobleme: Man sollte auf einem mobilen Gerät nicht "zu weit" in Bezug auf den "Skalierungs" -Parameter zoomen. Ich denke 2 oder 3 ist das Maximum.

+2 dafür

Hat jemand eine Lösung für dieses 2 Jahre alte Problem?

Soweit ich weiß, wurde nichts dagegen unternommen. Ich verweise auf meinen vorherigen Kommentar unter https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Wir laden jeden ein, eine PR dafür einzureichen, sobald es einen funktionierenden Code gibt.

Würde gerne eine Lösung dafür sehen. Im Moment ist dies das einzige, was mich davon abhält, pdf.js zu verwenden

:(

Pinch Zoom wäre toll! Ich habe dieses JQuery-Plugin gefunden, das pdf.js verwendet und über einen Pinch-Zoom und das Wischen von Seiten verfügt. http://touchpdf.net/demo/index.htm Aber es wäre gut, wenn es von Anfang an in pdf.js eingebaut wäre :-)

+1 Würde das gerne hier sehen.

+1, wäre das Beispiel an anderer Stelle, das hammer.js verwendet, um das Ereignis zu erfassen und dann die Zoomfunktionen von pdf.js aufzurufen, keine relativ "saubere" Methode?

@sporkman Was ich am Ende getan habe, war, die Leinwand wirklich groß zu machen und dann das native Browser-Zoomen zu verwenden, um das Zoomen zu ermöglichen (meine App wurde für Touch-Geräte entwickelt). Ich kann die Quelle bei Bedarf teilen.

@rorysmorris Wie haben Sie es geschafft, den nativen Browser-Zoom beim Kneifen beim Scrollen zu deaktivieren? Ich habe auch hammer.js auf pdf.js implementiert, kann dieses spezielle Problem jedoch nicht umgehen

Haben Sie versucht, die CSS-Eigenschaft touch-action ?
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Am 5. Oktober 2016, 15:15 Uhr, schrieb "toplay3" [email protected] :

@rorysmorris https://github.com/rorysmorris Wie haben Sie es geschafft, zu bekommen
um den nativen Browser-Zoom zu deaktivieren, wenn beim Scrollen gekniffen wird? ich habe
hat auch hammer.js auf pdf.js implementiert, kann dies aber nicht umgehen
Problem

- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/mozilla/pdf.js/issues/2582#issuecomment -251670785,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ABTUT83E287dv4LSs4T_TGnzwe8yqCMYks5qw6LmgaJpZM4AXvZ2
.

@ Rob - W.
Wow Genie! funktioniert jetzt perfekt! vielen Dank!

Wann soll dieses Problem umgesetzt werden? Es ist schon einige Zeit her, dass diese Ausgabe ursprünglich veröffentlicht wurde. Unnötig zu sagen +1!

Ich überprüfe dieses Problem seit einem Jahr auch jede Woche. Wäre toll, es im Core oder als Addon mit Hammer Js zu haben.

Um in diesem Thread konstruktiver zu sein, gibt es hier Anforderungen an die Benutzeroberfläche (wenn jemand wirklich helfen und die Lösung des Problems beschleunigen möchte) und es gibt nichts Spezielles für PDF.js:

• zum Zoomen und Schwenken einer Reihe von DIVs (mit unterschiedlichen Größen), die vertikal gestapelt sind
• Benutzer dürfen sich nicht in verschiedenen Maßstäben im Ansichtsfenster verlieren
• Erkennen und informieren Sie, wenn sich eine Div-Sichtbarkeit oder eine sichtbare Skala ändert.

Letzteres ist wichtig, da auf Geräten mit geringer Leistung nicht alle Seiten mit maximaler Auflösung gemalt werden sollen. Wenn jemand einen Prototyp hat, finde ich im IRC. Ich werde helfen, PDFPageView für Sichtbarkeit und Skalierung von Ereignissen zu verknüpfen. Soll ich auch 5-Good-Beginner-Bug setzen?

Ich bin damit einverstanden, dass dies ein guter Anfängerfehler wäre, also beschrifte ich ihn als solchen.

Dies gilt nicht nur für Mobilgeräte, sondern ich erhalte auch Funktionsanfragen zur Unterstützung des Zwei-Finger-Trackpad-Zooms (auf dem Mac).

Bei meiner kurzen Untersuchung stellte ich fest, dass es noch keine browserübergreifende Möglichkeit gibt, Zoomgesten zu unterstützen.

• Safari hat einige spezifische Gestenereignisse: https://developer.apple.com/reference/webkitjs/gestureevent
• Der Firefox-Add-On-Code hat Zugriff auf Gestenereignisse: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mouse_gesture_events
• Einige Bugzilla-Diskussionen zum Konvertieren von Pinch-Ereignissen in Strg-Rad (mit Eingaben und Verweisen auf andere Browser): https://bugzilla.mozilla.org/show_bug.cgi?id=1052253

+1

@ toplay3 und @ Rob - W Was hast du getan, damit es funktioniert? Hinzufügen von "touch-action: auto;"? Zu was? Und was hast du noch gemacht? Vielen Dank!

Hallo allerseits, wie die meisten von Ihnen bin ich daran interessiert, dass das Zoomen funktioniert. Hat jemand dies geschafft, selbst wenn er externe Bibliotheken wie Hammer verwendet hat? Wenn Sie es geschafft haben, wie ist das Setup? @rorysmorris @ toplay3 @ Rob - W danke

👍

@rorysmorris irgendwelche Ratschläge zu der obigen Frage? Vielen Dank :)

Hallo @squallstar - zuerst habe ich versucht, eine JS-Pinch- und Zoom-Bibliothek zu verwenden, um dies für mich zu erledigen, aber ich habe ein paar Probleme gefunden. Es hat nicht gezoomt, wie ich es wollte, dh es würde ermöglichen, dass die PDF-Leinwand vollständig vom Bildschirm abweicht, wenn ich nie wollte, dass die Kanten vom Bildschirmrand entfernt sind, wenn dies sinnvoll ist. Am Ende habe ich nur das native Zoomen verwendet, das in den mobilen Browser integriert ist, um zu kneifen / zoomen / navigieren. Ich habe PDF.js so eingerichtet, dass das PDF mit der dreifachen Pixelgröße gerendert wird, die angezeigt wird, und dann mit CSS verkleinert, damit es beim Vergrößern ziemlich scharf bleibt. Wenn Sie Hilfe benötigen, kann ich Ihnen ein funktionierendes Beispiel von meinem zeigen Implementierung.

@rorysmorris danke, es wäre toll, wenn du mir zeigst (oder ein Snippet sendest) oder wie du es implementiert hast. Sehr geschätzt 👍

@squallstar sende mir eine E-Mail über das Kontaktformular auf meiner Website und ich werde dir später heute eine Demo schicken :) http://rorymorris.co.uk

@squallstar Dies ist keine wirkliche Lösung, sondern eine Art

Die Leistung wird durch natives Scrollen und Schwenken erheblich verbessert , im Gegensatz zur Verwendung von JavaScript zum Ausführen dieser Aufgaben. Die maximale Zoomstufe kann einfach mit einem Meta-Ansichtsfenster-Tag konfiguriert werden. Wer möchte schon ein gerastertes Bild endlos zoomen? Übrigens eine großartig aussehende "JS-ImageResizer" -Bibliothek! @ MickL

Leistung war eher eine Vermutung. Nehmen wir an, Sie verwenden ein iPhone Plus im Querformat mit einer Breite von 2208 Pixel. Jetzt hätten Sie eine 6624px Leinwand. Abhängig von der PDF-Komplexität und der Anzahl der Seiten haben Sie möglicherweise 3 6000px Canvas mit HTML-Text, Grafiken usw. gerendert.

Ich denke, Ihre Lösung ist für viele Menschen großartig. Aber wie Sie beschrieben haben, ist es eher ein Fake-Zoom als das Auslösen von PDF.js Zoom und Rendering :)

In Bezug auf die Leistung ist dies zwar nicht besonders gut. In meinem speziellen Anwendungsfall musste ich mehr als 300 Seiten-PDFs in iPad-Größe (Retina) rendern und darüber eine Zeichenfläche haben!

PDF.js stürzte den Browser (iOS Safari) bei etwa 10 gerenderten PDF-Seiten ab, sodass ich am Ende immer nur eine PDF-Seite mit den vorherigen / nächsten Schaltflächen anzeigen musste. Nicht ideal! Und ich stimme zu, die in PDF.js integrierte native Zoomfunktion wäre viel schöner gewesen.

Kasse kamihq.com für ein funktionierendes Pinch-Zoom-Beispiel

@rorysmorris Ich habe Ihnen gestern Abend meine E-Mail über das Kontaktformular gesendet.

Kann jemand, der ein funktionierendes Beispiel hat ( @rorysmorris , @ Rob - W usw.), bitte teilen?

@rorysmorris Ich habe versucht, Sie über Ihre Website zu kontaktieren. Wenn jemand ein funktionierendes Beispiel dafür hat, können Sie es bitte teilen?

@ltullman @ hetalv985 Ich habe es geschafft, dass es funktioniert. Implementiere es selbst. Überprüfe meinen Kern hier:

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
Fügen Sie das einfach am Ende von viewer.html ein.

Danke Squallstar. Wir verwenden jedoch nicht die Datei viewer.html. Wir rendern das PDF in unserer iOS-App für Mobilgeräte in einem div-Tag. Wie verwenden wir diese Funktion in diesem Fall? Müssen wir die Viewer-Dateien einschließen?

Wir haben also die Funktion handleMouseWheel die sehr ähnlich ist. Warum nicht genau die gleiche Funktion mit Touch-Geste oder Hammer js verwenden? Ist das dann nicht in 1-2 Stunden behoben?

Leider ist es nicht so einfach. Bitte beziehen Sie sich auf meinen vorherigen Kommentar unter https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Wir müssen die Anzahl der Berührungsgesten begrenzen, damit die Zeichenfläche nicht bei jeder Deltaänderung neu gerendert wird, was ein großes Leistungsproblem darstellt. Wenn jemand bereit ist, daran zu arbeiten, können Sie gerne eine PR einreichen, und wir werden sie überprüfen.

Wenn das das einzige Problem ist ... :)

Ich habe auch festgestellt, dass bei "Strg + Mausrad" wie bei Google Maps zur Cursorposition gescrollt wird. Dies funktioniert jedoch nicht, wenn keine Bildlaufleisten vorhanden sind (Standardeinstellung beim Laden von Seiten). Damit sich dies natürlich anfühlt, müssen wir bei Bedarf eine Polsterung für den Pinch-Zoom und den Mausrad-Zoom erstellen.

Eine schöne Ergänzung wäre, wenn Mausrad-Zoom und Pinch-Zoom dieselbe Funktion verwenden würden.

Ihr Commit sieht schon gut aus. Vielleicht ist Leistung kein Thema mehr, es ist mehr als 3 Jahre her. Natürlich wäre die beste Lösung: Start-Pinch -> unscharfer Zoom -> End-Pinch -> PDF wirklich zoomen. Außerdem funktioniert user-scalable=no auf dem neuesten iOS nicht mehr. Also müssen wir vielleicht auch preventDefault() .

Ich habe viel Zeit in dieses Projekt investiert. Eigentlich scheint es möglich, aber es gibt einige Probleme, die ich nicht lösen konnte:

• hammer.js funktioniert nur bei Pinchend (Pinchmove wird immer abgebrochen, wenn pdf.js zoomt)
• Ich konnte nicht perfekt zur Mitte des Pinchends scrollen, obwohl ich die gleiche Methode wie beim Mausrad-Zoom verwendet habe
• Manchmal wird die Mitte von hammer.js nicht richtig eingestellt
• Manchmal wird pinchend nicht von hammer.js aufgerufen und es erfolgt kein Zoom
• Ich habe versucht, eine CSS-Transformation auf Pinchmove hinzuzufügen (CSS-Zoom auf Pinchmove, PDF-JS-Zoom auf Pinchend), was eine großartige Leistung bringen würde, aber ich konnte wieder nicht perfekt scrollen (Position #Viewer mit CSS-Übersetzung).
• hammer.js verhindert jede andere Berührungsaktion (in unserem Fall normales Scrollen der Seite), daher musste ich hammer.js ändern, um nur zu verhindern, dass 2 Finger verwendet werden
• (Gleiches gilt für das Zoomen mit dem Mausrad :) Wenn keine Bildlaufleisten vorhanden sind (herausgezoomt, damit Sie das gesamte Dokument sehen), können wir das Dokument nicht in der Mitte der Klemme positionieren (scrollen).

Wahrscheinlich ist all dies lösbar, aber iOS 10 ermöglicht das Zoomen von Seiten, selbst wenn es mit user-scalable=no deaktiviert ist. Ein paar Mal bei Prise PreventDefault () funktioniert also nicht und die ganze Seite wird gezoomt. Dies würde zu einem großen Problem für den Endbenutzer führen (der einzige Ausweg besteht darin, zweimal auf die Symbolleiste zu tippen).

@ MickL Ich habe es versucht. Ich konnte die Aufhebung des "Pinch Zoom" vermeiden, indem ich den Klassen pdfViewer und page die CSS-Eigenschaft "pointer-events: none" hinzufügte (und stopPropagation + verhinderteDefault aufrief, wenn viewerContainer Double-Touch-Ereignisse auslöst, damit die gesamte Seite nicht vergrößert wird iOS).

Ich habe das gleiche Problem, das Sie beschreiben, weil ich nicht das perfekte Zoompositionsereignis habe, wenn ich die modifizierte Mausradmethode verwende (übergeben Sie die nächste anzuwendende Skala, die aktuelle "mittlere Position" oder das Ziel und das Delta der "mittleren Position", um es zu wissen wie viel nach links, rechts, oben, unten verschoben werden muss, verwaltet von pdfViewer.container.scrollLeft und pdfViewer.container.scrollTop). Es scheint immer ein Fehler zu sein, der möglicherweise durch das Timeout verursacht wird, das den Betrachter davon abhält, bei jedem Double-Touch-Ereignis zu rendern.

Gibt es einen Hinweis darauf, wo diese CSS-Skalentransformationen angewendet werden sollen, um zu vermeiden, dass alles in jedem Skalendelta gerendert wird?

@betovidal Ich weiß, es ist ein paar Monate her seit deinem letzten Beitrag. Haben Sie Aktualisierungen vorgenommen, damit das Pinch-Zooming in PDF.js funktioniert? Ich arbeite an einem Projekt für eine Arbeit, die dies erfordert.
Vielleicht könnten wir zusammenarbeiten, um etwas herauszufinden?

@squallstar Ich habe Ihre Lösung sehr kurz auf iOS getestet. Und bis jetzt funktioniert es für mich! Vielen Dank für das Teilen Ihrer Lösung 💯

@ Vuinguyen danke! Ich bin froh, dass es auch bei dir funktioniert hat;)

+1

Hoffnung, den Code von @squallstar in eine PR zu integrieren? Wenn ein Benutzer versucht, ein mobiles Gerät zu kneifen und zu zoomen, wird er derzeit häufig vom Scrollen "ausgeschlossen" und muss die Seite neu laden, um einfach weiter zu navigieren. Das Navigieren auf den winzigen Schaltflächen "+" und "-" ist für einen mobilen Betrachter im Jahr 2018 eher uninteressant.

Pinch-Zoom ist unter iOS seit iOS 10 "kaputt". Auch wenn alles perfekt implementiert ist, wird Safari alles vermasseln.

Ist dies ein iOS-spezifisches Problem? Ist es möglich, ein von pdfjs auf Android bereitgestelltes PDF zu zoomen?

Kommt auf den Browser an. Ich gehe davon aus, dass nur iOS-Browser "user-scalable = no" ignorieren.

Im Moment müssen Sie die Plus- / Minus-Tasten auch auf Mobilgeräten drücken, um das Dokument zu zoomen. Dies ist wirklich seltsam, zumal auch Pinch-to-Zoom aktiv ist. Ich denke, der beste Weg, um mobil zu werden, besteht darin, in einer "natürlichen" Größe zu rendern und den Browser den Zoom steuern zu lassen, ähnlich wie bei einer Webseite.

Für mich sagt das alles. Ich denke, hier geht es weniger um eine bestimmte Funktion als vielmehr um einen Ansatz für das mobile Erlebnis.

Ich gehe davon aus, dass nur iOS-Browser "user-scalable = no" ignorieren.

Richtig.

Ich habe gesehen, dass "Box Content Preview" (das PDFJS zum Anzeigen von PDFs verwendet) eine gute Implementierung dafür bietet. Dies ist ein Codepen ihres Betrachters:

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

Und dies ist die Pull-Anfrage für ihre Lösung:

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

Ich dachte, dass vielleicht jemand etwas Ähnliches für PDFJS machen könnte, basierend auf seiner Lösung. Ich werde versuchen, es selbst zu implementieren und den Code zu veröffentlichen, wenn ich dies tue. Ich wäre großartig, wenn jemand anderes (der wahrscheinlich mehr Erfahrung als ich hat) auch zusammenarbeiten und es versuchen könnte!

@ amurillo17 danke für den Link. Die Box-Lösung sieht fantastisch aus. Ich würde gerne sehen, wie so etwas mit pdfjs funktioniert. Bitte halten Sie uns über Ihre Fortschritte auf dem Laufenden!

Gibt es eine gute Lösung für dieses Problem?

Irgendwelche Updates dafür? Wäre eine tolle Funktion!

irgendwelche Updates? Vielen Dank

Gibt es einfache Möglichkeiten, diese Funktion zum vorhandenen Viewer hinzuzufügen?

Gibt es einfache Möglichkeiten, diese Funktion zum vorhandenen Viewer hinzuzufügen?

Nein.

@prohtex Hm, das ist ziemlich traurig. Ich hoffe, dass eine solche Funktion bald nach all den Jahren hinzugefügt wird.

@prohtex Hm, das ist ziemlich traurig. Ich hoffe, dass eine solche Funktion bald nach all den Jahren hinzugefügt wird.

Es wird nur hinzugefügt, wenn jemand Code in eine PR integriert (leider nicht ich), und selbst dann kann es Jahre dauern.

Ich habe eine Problemumgehung, aber es ist "Nur Android", da mir iOS in meinem Addon "Firefox für Android" egal ist:
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Mein Makefile hängt dies einfach an "web / viewer.js" an. Es registriert die Berührungsereignisse und übersetzt die Quetschgesten in Tastenklicks.

Ich habe eine Problemumgehung, aber es ist "Nur Android", da mir iOS in meinem Addon "Firefox für Android" egal ist:

Es funktioniert auch auf meinem iPad, fühlt sich aber etwas träge und nicht sehr natürlich an. Nach jeder Prise wird ein Schritt gezoomt. Sie müssen also die Finger loslassen, damit es zoomt, und es spielt keine Rolle, wie weit Sie geklemmt haben. Ist dies das normale Verhalten oder nur ein gerätespezifischer Fehler? Trotzdem danke, denn dies ist ein Schritt in die richtige Richtung.

Es funktioniert auch auf meinem iPad, fühlt sich aber etwas träge und nicht sehr natürlich an. Nach jeder Prise wird ein Schritt gezoomt. Sie müssen also die Finger loslassen, damit es zoomt, und es spielt keine Rolle, wie weit Sie geklemmt haben. Ist dies das normale Verhalten oder nur ein gerätespezifischer Fehler? Trotzdem danke, denn dies ist ein Schritt in die richtige Richtung.

Mit Blick auf den Code ist dies keine praktikable Lösung oder gar eine gute Problemumgehung. Sie müssen lediglich auf Zoomereignisse achten und das Klicken auf die Schaltflächen [-] [+] mit jQuery simulieren.

@prohtex Genau. Wenn Sie es versuchen, macht es etwas, aber es funktioniert überhaupt nicht gut.

Wie gesagt: Nicht perfekt, aber besser als nichts.
Zumindest für mich ist es einfacher, die Pinch-Geste auszuführen, als eine kleine Zoomtaste auf einem kleinen mobilen Bildschirm zu drücken. Damit funktionieren Gesten, von denen jeder Benutzer eines Mobilgeräts erwartet, dass sie funktionieren.

Es funktioniert auch auf meinem iPad, fühlt sich aber etwas träge und nicht sehr natürlich an. Nach jeder Prise wird ein Schritt gezoomt. Sie müssen also die Finger loslassen, damit es zoomt, und es spielt keine Rolle, wie weit Sie geklemmt haben. Ist dies das normale Verhalten oder nur ein gerätespezifischer Fehler? Trotzdem danke, denn dies ist ein Schritt in die richtige Richtung.

Es trifft die Knöpfe. "Natürliches Zoomen" ist mit diesem einfachen Ansatz nicht möglich und ich möchte nicht zu viel mit PDF.js herumspielen. Dies ist nicht das Ziel meines Addons.

Es sollte jedoch möglich sein, mehrere Tastendrücke auszuführen, je nachdem, wie weit sich die Finger bewegt haben. Ich werde das versuchen.

Mit Blick auf den Code ist dies keine praktikable Lösung oder gar eine gute Problemumgehung. Sie müssen lediglich auf Zoomereignisse achten und das Klicken auf die Schaltflächen [-] [+] mit jQuery simulieren.

Ich bin offen für Vorschläge, aber da dies Teil eines Addons ist, das nur PDF.js als PDF-Viewer in Firefox verwenden möchte, werde ich keine tiefgreifenden Änderungen vornehmen.

Übrigens: Mein Code enthält keine einzige Zeile von jQuery. Dies ist rohes JavaScript.

Es sollte tatsächlich möglich sein, die Zoomschritte auszuführen, während die Finger bewegt werden ...
Ich werde versuchen, weitere Verbesserungen vorzunehmen, aber der einzige Kommunikationspfad, den ich verwenden werde, sind die beiden Tasten, die ich fernsteuern werde. Auf diese Weise stört mein Code PDF.js nicht.

Übrigens: Mein Code enthält keine einzige Zeile von jQuery. Dies ist rohes JavaScript.

Ich stehe korrigiert. Ich hoffe bald auf eine ausgereifte Lösung.

Der Weg, dies zu erreichen, ist die Verwendung der CSS-Transformation beim Pinch-Zoom. Auch die Bewegung der Finger muss nicht nur auf den Zoom angewendet werden. Dann können Sie am Pinch-Zoom-Ende die CSS-Transformation zurücksetzen und den tatsächlichen Zoom anwenden und zu pdf.js scrollen.

PS Die Verwendung von jQuery in einem Nicht-jQuery-Projekt scheint mir bereits eine schlechte Praxis zu sein.

PS Die Verwendung von jQuery in einem Nicht-jQuery-Projekt scheint mir bereits eine schlechte Praxis zu sein.

Wo verwendet @ M-Reimer JQuery? Wie er bereits sagte, verwendet seine Problemumgehung nur einfaches Javascript.

Ja ... mein schlechtes. Punkt ist, diese Lösung funktioniert nicht gut.

Aktualisiert, sodass der Abstand zwischen den Fingern den Zoombetrag ändert:
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Es ist nicht möglich zu zoomen, während die Finger bewegt werden, da aus irgendeinem Grund das tatsächliche Zoomen und Neuzeichnen dazu führt, dass das Berührungsereignis irgendwie "endet".
Nochmals: Besser als überhaupt nicht mit der Geste umzugehen.

@ M-Reimer Vielen Dank für Ihre Arbeit. Zumindest ist es eine Verbesserung gegenüber der letzten Version. Vielleicht findet jemand eine Lösung, um es beim Zoomen neu zu zeichnen. Oder es ist möglich, mithilfe von CSS-Transformationen vorübergehend zu zoomen und sie schließlich nach Beendigung der Berührungsgeste neu zu zeichnen.

@anvaka Hat den Fall untersucht und es scheint, als gäbe es eine ziemlich einfache Lösung . Leider habe ich momentan keine Zeit, es zu testen, aber vielleicht möchte man es versuchen.

Ich habe eine Version basierend auf der @quallstar- Lösung erstellt, die auch eine CSS-Transformation verwendet, um mehr Benutzer-Feedback zu geben. Das Rendern erfolgt nur am Touchend. Es ist nicht perfekt, es gibt einige kleine Probleme mit der Bildlaufpositionierung nach dem Rendern, aber vielleicht könnte es jemand als Start verwenden.

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

Gibt es noch keine Lösung für dieses Problem? Ich möchte pdf.js auf Mobilgeräten verwenden, aber ohne die Möglichkeit zum Zoomen ist es auf kleineren Bildschirmen meistens nutzlos.

Ich habe es ohne die Verwendung von hammer.js zum Laufen gebracht, aber da es für ein Kundenprojekt war, kann ich den Code nicht teilen. Ich habe Pinch und Doubletap implementiert und mit CSS gezoomt und auf Pinchend habe ich pdf.js gezoomt. Einige Elemente müssen Breite / Höhe einstellen, andere können mit CSS-Transformation transformiert werden. Auch beim Zoomen muss die Scroll-Uhr von pdf.js viewer.js verhindert werden. Ich habe viel Zeit gebraucht, aber am Ende hat es ziemlich gut funktioniert.

Gibt es noch keine Lösung für dieses Problem? Ich möchte pdf.js auf Mobilgeräten verwenden, aber ohne die Möglichkeit zum Zoomen ist es auf kleineren Bildschirmen meistens nutzlos.

Bis ein Entwickler mit den Schritten der Codebasis von pdf.js Erfahrung hat, um eine Lösung anzubieten, liegt es an jeder Person, die pdf.js implementiert, etwas zusammenzubasteln. Scheint keine große Priorität für dieses Projekt zu sein.

Hier ist eine PR, die ohne allzu große Schwierigkeiten integriert werden kann:

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

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

@jsprpalm danke funktioniert funktioniert braucht dringend ein

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

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

Ich habe dieses zu meinem PDF Viewer Addon hinzugefügt. Scheint ziemlich gut zu funktionieren.
https://addons.mozilla.org/android/addon/android-pdf-js/

Edit: funktioniert bei mir

Für mich arbeitet dies natürlicher:

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

Wie stelle ich den minimalen Zoom ein? Ich kann das Bild so weit verkleinern, dass es sich in einen Punkt verwandelt.

Ich habe die gleiche Frage wie @KazysNoobiys.
Die minimale Skalierung des Ansichtsfensters wirkt sich nicht auf das Zoomen aus

Ich arbeite an einer anderen Problemumgehung: einer transparenten CSS-Ebene, die pdf.js überlagert, um verschiedene Wischfunktionen zu handhaben. Der Overlay-Teil funktioniert jetzt, aber ich weiß nicht, welche Funktionen ich aufrufen soll.
if (swipe == 'left') ????
Welche Funktion würde ich aufrufen, um zur nächsten Seite zu gelangen oder zur vorherigen Seite zu sichern oder zu zoomen?

Sparen Sie Zeit und Leben, bearbeiten Sie Ihre HTML-Datei wie folgt

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

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