In Bild zoomen mit "pinch" und hammer.js

LeMarkus

Mitglied
Die Überschrift sagt eigentlich schon alles. Ich versuche gerade mit Gesten eine Art Gallery zu bauen. Dazu bräuchte ich eine Möglichkeit in einzelne Bilder zu zoomen ("pinch") und die Bilder zu verschieben ("pan"). Da hammer.js bereits relativ einfach diese Gesten erkennt, benutze ich das als Grundgerüst. Das verschieben ist nicht das Problem, auch nicht der Zoom an sich. Ich habe momentan nur ein Problem eine Möglichkeit zu finden, um in ein Bild genau an der Stelle zu zoomen, an der sich die Finger gerade befinden bei der Geste.

In der Theorie klingt das alles einfach. Man müsste "einfach" nur das Bild beim Zoomen (transform:scale(...)) etwas nach links und oben verschieben. Nur eben diesen Wert zu berechnen... da weiß ich momentan einfach nicht weiter.

Um das Ganze praktisch zu testen, ist hier mein bisheriger Code: http://codepen.io/anon/pen/pvOzpR
"Pan" alleine funktioniert bereits, ist auch nicht sonderlich schwer. Sobald man alles Zoomen möchte oder sogar beides gleichzeitig, wird es leider ziemlich ungenau.

Im Moment berechnen ich den offset der x-Achse mit dieser Gleichung:

Javascript:
panInitX + ev.center.x - ev.center.x * ( scale / scaleInit )

Aber auch das stellte sich in der Praxis leider als falsch heraus. Habt ihr Vorschläge/Ideen, um dieses Problem zu lösen?
 
Ich hatte einen Schreibfehler, weshalb das Zoomen nicht richtig geht. Ich habe den Code nochmals angepasst: http://codepen.io/anon/pen/azaNRK

Das Zoomen auf dem Desktop (Fake/Emulated multitouch) funktioniert nun problemlos. Leider funktioniert es noch nicht wirklich auf einem richtigen mobilen Gerät. Das liegt vor allem daran, dass man dort gleichzeitig "Pinch" und "Pan" machen kann. Sobald man es gleichzeitig macht, sieht man die Fehler deutlich, vor allem das Springen bei "pinchend".

Neben dem Schreibfehler, habe ich nun auch die Berechnung des offsets etwas angepasst:
Code:
( ev.center.x - panInitX )-(+ ev.center.x - panInitX *(scale / scaleInit))
 

Neue Beiträge

Zurück