Pincer pour zoomer avec CSS3

Je suis en train de mettre en œuvre de zoom par pincement des gestes exactement comme dans Google Maps. J'ai regardé d'un discours de Stephen Bois - "La création de Responsive HTML5 Interfaces Tactiles” - sur la question et utilisé la technique mentionné. L'idée est de définir la transformation de l'origine de la cible de l'élément (0, 0) et de l'échelle au point de le transformer. Alors traduire l'image de sorte qu'il reste centré sur le point de se transformer.

Dans mon code de test de mise à l'échelle fonctionne très bien. L'image zoom avant et arrière fine entre la suite des traductions. Le problème est que je ne suis pas le calcul de la traduction des valeurs correctement. Je suis à l'aide de jQuery et Hammer.js les événements tactiles. Comment puis-je régler mon calcul dans la transformation de rappel afin que l'image soit centrée sur le point de transformer?

La CoffeeScript (#test-resize est un div avec une image d'arrière-plan)

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
InformationsquelleAutor Maros Hluska | 2012-05-29