Estoy intentando implementar gestos de pellizco para hacer zoom exactamente como en Google Maps. Vi una charla de Stephen Woods -"Creando Interfaces Touch HTML5 Responsivas" - Sobre el tema y utilizando la técnica mencionada. La idea es establecer el origen de transformación del elemento de destino en (0, 0) y escalar en el punto de la transformación. Luego, traduzca la imagen para mantenerla centrada en el punto de transformación.

En mi código de prueba el escalado funciona bien. La imagen se acerca y se aleja bien entre las traducciones posteriores. El problema es que no estoy calculando correctamente los valores de traducción. Estoy usando jQuery y Hammer.js para eventos táctiles. ¿Cómo puedo ajustar mi cálculo en la devolución de llamada de transformación para que la imagen permanezca centrada en el punto de transformación?

El CoffeeScript (#test-resize es undiv con una imagen de fondo)

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