Я пытаюсь реализовать жесты "сжимать до зума" точно так же, как в Google Maps. Я наблюдал за разговором Стивена Вудса - "Создание адаптивных интерфейсов для интерфейса HTML5" - о проблеме и использовалась упомянутая техника. Идея состоит в том, чтобы установить начало преобразования целевого элемента в (0, 0) и масштабировать в точке преобразования. Затем переведите изображение, чтобы оно было сосредоточено в точке преобразования.
В моем тестовом коде масштабирование работает отлично. Изображение увеличивает и уменьшает масштаб между последующими переводами. Проблема в том, что я не правильно вычисляю значения перевода. Я использую jQuery и Hammer.js для сенсорных событий. Как я могу настроить мои вычисления в обратном вызове преобразования, чтобы изображение оставалось центрированным в точке преобразования?
The 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