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:
Aber auch das stellte sich in der Praxis leider als falsch heraus. Habt ihr Vorschläge/Ideen, um dieses Problem zu lösen?
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?
