Panzoom: Pinch-Zoom verschiebt das Bild von der Bildschirmmitte weg

Vielen Dank für die Eröffnung eines Problems. Ich habe die Demo auf iOS und Android ausprobiert und konnte sie nicht reproduzieren. Sie haben Desktop-Browser aufgelistet, aber Pinch-Zoom ist hauptsächlich für Mobilgeräte gedacht (obwohl einige Geräte sowohl eine Maus als auch einen Touchscreen haben). Es könnte hilfreich sein zu wissen, welches Gerät Sie verwenden, auch wenn ich es wahrscheinlich nicht testen kann.

Ich kann nicht viel tun, ohne das Problem reproduzieren zu können. Wenn Sie tiefer graben und feststellen, dass eine Codeänderung in Panzoom das Problem behebt (oder dass ein anderer Testfall neben der Demo das Problem reproduziert), kommentieren Sie bitte hier und ich werde einen Patch in Betracht ziehen.

Hallo Herr Willison;

Danke für Ihre Antwort. Ich habe sowohl die Desktop- als auch die mobile Version von verwendet
sagte Browser. Ich habe ein Redmi Note 8T und ein Galaxy 8 verwendet, um dies zu testen.

Um dieses Problem zu sehen, können Sie sich vielleicht die Demo ansehen, die ich entwickle?
Geben Sie einfach einen Namen ein (es wird nichts gespeichert, es ist nur ein Kinderspiel) und klicken Sie
auf der Schaltfläche „Exploració lliure“; Sie werden zu Panzoomed weitergeleitet
Bild. Wie Sie sehen werden, funktioniert der Mausrad-Zoom gut, aber der Pinch-Zoom (und
tatsächlich panzoom.zoomIn() und panzoom.zoomOut() Tasten auch) bewegt die
Bild.

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

Ich bin wirklich dankbar für Ihre Hilfe und bitte entschuldigen Sie etwaige Unannehmlichkeiten.

Mit freundlichen Grüßen;

Jorge Sanchez Blanco

El Mittag, 21. Sept. 2020 um 19:45, Timmy Willison (<
[email protected]>) Beschreibung:

Vielen Dank für die Eröffnung eines Problems. Ich habe die Demo ausprobiert
https://timmywil.com/panzoom/demo auf iOS und Android und konnte nicht
reproduzieren. Sie haben Desktop-Browser aufgelistet, aber Pinch-Zoom ist hauptsächlich für
mobil (obwohl einige Geräte sowohl eine Maus als auch einen Touchscreen haben). Es könnte
hilfreich zu wissen, welches Gerät Sie verwenden, obwohl ich es wahrscheinlich wäre
kann es nicht testen.

Ich kann nicht viel tun, ohne das Problem reproduzieren zu können. Wenn
Sie graben tiefer und stellen fest, dass eine Codeänderung in Panzoom das Problem behebt (oder dass a
ein anderer Testfall neben der Demo reproduziert das Problem), bitte
Kommentar hier und ich werde einen Patch in Betracht ziehen.

—
Sie erhalten dies, weil Sie den Thread verfasst haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/timmywil/panzoom/issues/512#issuecomment-696267620 ,
oder abbestellen
https://github.com/notifications/unsubscribe-auth/AOF4EAOK6YQVAHINOAQ3JZTSG6GMRANCNFSM4RUT4P7A
.

Ich habe das gleiche Problem. Es sieht so aus, als ob der Brennpunkt nicht richtig berechnet wurde und ganz unten ist.

@jsblanco Ich verstehe. Panzoom verlässt sich auf transform-origin: 50% 50% , wodurch die Animation in der Mitte des Ansichtsfensters und nicht in der Bildmitte zentriert wird, die in diesem Fall niedriger wäre. Es verschiebt das Bild aufgrund der Einstellung contain: outside , um zu verhindern, dass das Bild zu weit nach unten geht. Ich denke, dies kann behoben werden, indem Sie zoomToPoint aufrufen oder stattdessen zoom mit der Option focal verwenden und den Punkt im Ansichtsfenster finden, der tatsächlich die Mitte des Bildes ist. Ist das sinnvoll?

Ich könnte so etwas vielleicht standardmäßig machen, wenn contain: outside gesetzt ist.

@rmatec Benutzt du auch contain: outside ?

Ich verwende nicht die Option enthalten. In meinem Fall sieht es so aus, als ob der Brennpunkt in der unteren Mitte liegt. Das Ein- oder Ausklemmen erfolgt relativ zu diesem Punkt.

@rmatec Ich denke, es muss eine Option im Spiel geben, da ich dieses Verhalten in den Demos nicht sehe. Gibt es eine andere Option, die Sie einstellen?

Ich verwende Folgendes, um Panzoom zu initialisieren.

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

Es funktioniert perfekt auf dem Desktop, aber aus irgendeinem Grund nicht auf dem Handy.

Ok, Ihr Fall klingt wie es könnte anders sein. Könnten Sie in https://jsbin.com oder https://codepen.io reproduzieren und ein neues Ticket erstellen? Hier ist eine Vorlage, die geklont werden kann https://jsbin.com/dibofogini/1/edit?html ,js,output.

Wird besorgt. Danke.

Aus irgendeinem Grund erscheint das Bild bei Verwendung der Fokusoption in der Nähe von
unten rechts, und es kann nicht weiter gezoomt werden, weder hinein noch heraus.
Vielleicht mache ich etwas falsch? Muss ich bestimmte Parameter übergeben
zu panzoom.zoomIn() und .zoomOut(), um den Brennpunkt anzugeben, oder einfach nur
sollte es ausreichen, es in die Panzoom-Anfangserklärung aufzunehmen?

Für das, was es wert ist, habe ich die folgenden Methoden ausprobiert, um den Fokus zu erhalten
Punkt. Ich habe auch versucht, rohe Zahlen zu setzen.

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

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

Das Entfernen von „contain: outside“ ergibt nur ein schwarzes Bild.

El März, 22. Sept. 2020 um 15:59, Timmy Willison (<
[email protected]>) Beschreibung:

@jsblanco https://github.com/jsblanco Ich verstehe. Panzoom setzt auf Transform-Origin:
50 % 50 %, wodurch die Animation eher in der Mitte des Ansichtsfensters zentriert wird
als in der Bildmitte, die in diesem Fall niedriger wäre. Es
verschiebt das Bild wegen der Einstellung "contain: outside", um das zu verhindern
Bild davon ab, zu weit nach unten zu gehen. Ich denke, das lässt sich telefonisch beheben
zoomToPoint oder indem Sie stattdessen Zoom mit der Fokusoption verwenden und finden
der Punkt im Ansichtsfenster, der tatsächlich die Mitte des Bildes ist. Tut
das macht Sinn?

Ich könnte vielleicht so etwas standardmäßig tun, wenn enthalten: draußen
eingestellt ist.

@rmatec https://github.com/rmatec Verwenden Sie auch „Contain: Outside“?

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/timmywil/panzoom/issues/512#issuecomment-696740708 ,
oder abbestellen
https://github.com/notifications/unsubscribe-auth/AOF4EANBQXE5TDJOZNTBN6LSHCUVXANCNFSM4RUT4P7A
.

@jsblanco Entschuldigung, es ist komplizierter als das. Der Weg, dies zu tun, wäre, die Mitte des Bildes zu finden und diese auf ihren Punkt im übergeordneten Panzoom-Ansichtsfenster zu übertragen. Sie würden dies dann als Fokusoption übergeben und es sollte jedes Mal berechnet werden, wenn Sie Zoom aufrufen. Lassen Sie mich jedoch sehen, ob ich ein Beispiel für Sie erarbeiten kann. Das würde zoomIn / zoomOut beheben.

Dies würde jedoch das Pinch-Zoom-Verhalten nicht ändern. Dies ist wohl das Richtige, da das Zoomen auf bestimmte Punkte gegen contain: outside stößt. Ich bin mir nicht sicher, ob es dort eine Lösung gibt, außer vielleicht den Zoom nicht zuzulassen, wenn sich das Bild bewegen muss, damit es richtig im Ansichtsfenster bleibt.

Ok, Ihr Fall klingt wie es könnte anders sein. Könnten Sie in https://jsbin.com oder https://codepen.io reproduzieren und ein neues Ticket erstellen? Hier ist eine Vorlage, die geklont werden kann https://jsbin.com/dibofogini/1/edit?html ,js,output.

Ich habe https://github.com/timmywil/panzoom/issues/513 für meinen speziellen Fall erstellt. Es gibt einen Link zu JSBin, der das Problem zeigt.

Ich kann dieses Problem reproduzieren, wenn ich "animate: true" aktiviert lasse.
Dieses Problem tritt nicht bei „animate: false“ auf – ich habe Ihre Vorlage @timmywil geklont, um dieses Problem zu reproduzieren:

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

(Ich habe den Wheel-Event-Listener implementiert, um direkt zu zoomen - Wenn Sie schnell genug scrollen, wird die Position verschoben.)

Okay, ich habe mein Problem nach Nr. 515 verschoben, weil das Problem zwar dasselbe ist, aber eine andere Konfiguration hat.

Hallo;

Entschuldigung für die lange Antwortzeit. Ich glaube nicht, dass es mit "contain="outside"" zu tun hat; Ich habe es gerade entfernt und es zeigte immer noch das gleiche Verhalten, wenn auch nicht so intensiv. Das Panzoom-Div und das Bild haben jedoch eine feste Größe, die unabhängig von der der Straße ist; könnte das ein Teil des Problems sein?

Danke

@jsblanco Der Fix sollte derselbe sein.

Hallo, ich wollte gerade eine neue Ausgabe über das Bewegen des Radzooms von der Mitte aufmachen, habe aber diese hier durchgesehen und dachte, dass es genug damit zusammenhängt. Im Folgenden sind meine Ergebnisse und Problemumgehung. Beachten Sie, dass ich nur in Browsern auf einem MacBook mit dem Trackpad getestet habe.

Mir ist aufgefallen, dass bei der Brennpunkt-Zoom-Demo die Mitte beim Zoomen in Safari, Firefox nach oben links schwebt. Ich bekomme das gleiche Verhalten auch in Chrome, aber nur, wenn der Webinspektor geöffnet ist.

Also fing ich an, es zu untersuchen, und mein Verdacht ist, dass das Mausradereignis zu oft ausgelöst wird und die Dinge aufgrund der asynchronen Natur von Panzoom nicht korrekt aktualisiert werden. Ich dachte, wenn ich versuche, die Frequenz des Zoomens zu drosseln, könnte es helfen, und tatsächlich scheint es zu "funktionieren". Sie können es hier in Aktion sehen: https://jsbin.com/joliduwulo/1/edit?html ,js,output.

Die Einschränkung ist, dass das Zoomen weniger glatt erscheinen würde. In diesem Beispiel beschränke ich es auf maximal einen Zoom alle 20 ms, aber als ich mit großen SVGs testete, insbesondere in Firefox, musste ich diese Einstellung auf etwa 50 ms setzen, damit der Brennpunkt nicht verloren ging.

@timmywil bitte lass es mich wissen, wenn du möchtest, dass ich trotzdem ein neues Thema eröffne. Das scheint ein Hack zu sein, aber es löst das Problem für mich. Wenn Sie der Meinung sind, dass die Lösung es wert ist, erkundet zu werden, würde ich gerne einen Beitrag leisten.

+1 auf die Möglichkeit, auf das Panzoom-Element und nicht auf das Ansichtsfenster zu zentrieren

Move-Funktion auf panzoom.ts:426 ersetzen

Funktion verschieben (Ereignis: PointerEvent) {
wenn (
!istSchwenken ||
origX === undefiniert ||
origY === undefiniert ||
startClientX === undefiniert ||
startClientY === undefiniert
) {
Rückkehr
}
addPointer(Zeiger, Ereignis)
konstanter Strom = getMiddle (Zeiger)
if (Zeiger.Länge > 1) {
// Verwenden Sie den Abstand zwischen den ersten 2 Zeigern
// um die aktuelle Skala zu bestimmen
// Zoomproblem auf Mobilgeräten verhindern
if (startDistance === 0) {
startDistance = getDistance (Zeiger);
}
const diff = getDistance(pointers) - startDistance
const toScale = constrainScale((diff * options.step) / 80 + startScale).scale
zoomToPoint(toScale, aktuell)
} anders {
// Else-Bedingung hinzugefügt, um Fehler beim Brennpunkt des mobilen Zooms zu vermeiden
Pfanne(
origX + (current.clientX - startClientX) / scale,
origY + (aktuell.clientY - startClientY) / scale,
{
animieren: falsch
}
);
}
}