Ich versuche, Pinch-to-Zoom-Gesten genau wie in Google Maps zu implementieren. Ich habe einen Vortrag von Stephen Woods gesehen -"Responsive HTML5 Touch Interfaces erstellen" - über das Problem und verwendete die genannte Technik. Die Idee ist, den Transformationsursprung des Zielelements auf (0, 0) und die Skalierung am Punkt der Transformation festzulegen. Verschieben Sie dann das Bild, um es am Transformationspunkt zentriert zu halten.

In meinem Test funktioniert die Code-Skalierung einwandfrei. Das Bild wird zwischen nachfolgenden Übersetzungen fein vergrößert und verkleinert. Das Problem ist, dass ich die Übersetzungswerte nicht richtig berechne. Ich benutze jQuery und Hammer.js für Touch-Events. Wie kann ich meine Berechnung im Transformationsrückruf anpassen, damit das Bild am Transformationspunkt zentriert bleibt?

Das Kaffeeskript (#test-resize ist eindiv mit einem Hintergrundbild)

image = $('#test-resize')

hammer = image.hammer ->
  prevent_default: true
  scale_treshold: 0

width = image.width()
height = image.height()
toX = 0
toY = 0
translateX = 0
translateY = 0
prevScale = 1
scale = 1

hammer.bind 'transformstart', (event) ->

  toX = (event.touches[0].x + event.touches[0].x) / 2
  toY = (event.touches[1].y + event.touches[1].y) / 2

hammer.bind 'transform', (event) ->

  scale = prevScale * event.scale
  shiftX = toX * ((image.width() * scale) - width) / (image.width() * scale)
  shiftY = toY * ((image.height() * scale) - height) / (image.height() * scale)
  width = image.width() * scale
  height = image.height() * scale

  translateX -= shiftX
  translateY -= shiftY

  css = 'translateX(' + @translateX + 'px) translateY(' + @translateY + 'px) scale(' + scale + ')'
  image.css '-webkit-transform', css
  image.css '-webkit-transform-origin', '0 0'

hammer.bind 'transformend', () ->
  prevScale = scale