通过CSS3进行捏合缩放

7 浏览
0 Comments

通过CSS3进行捏合缩放

我正在尝试实现与Google地图完全相同的捏-缩放手势。我观看了Stephen Woods的一个演讲 - "Creating Responsive HTML5 Touch Interfaces” - 关于这个问题，并使用了他提到的技术。思路是将目标元素的变换原点设置为(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

0