Я пытаюсь реализовать жесты «пинч-масштаб» точно так же, как в Картах Google. Я смотрел разговор Стивена Вудса -& quot; Создание адаптивных сенсорных интерфейсов HTML5 & # x201D; - о проблеме и использованной технике. Идея состоит в том, чтобы установить начало преобразования целевого элемента в (0, 0) и масштабировать в точке преобразования. Затем переведите изображение, чтобы оно было отцентрировано в точке преобразования.

В моем тесте масштабирование кода работает нормально. Изображение увеличивается и уменьшается между последующими переводами. Проблема в том, что я неправильно рассчитываю перевод. Я использую jQuery и Hammer.js для сенсорных событий. Как я могу скорректировать мои вычисления в обратном вызове преобразования, чтобы изображение оставалось центрированным в точке преобразования?

CoffeeScript (#test-resize этоdiv с фоновым изображением)

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