javascript - 使用 CSS3 双指缩放

Question

我正在尝试完全按照 Google map 中的方式实现双指缩放手势。我看了斯蒂芬伍兹的演讲 - "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

Answer 1

我设法让它工作了。

jsFiddle demo

在 jsFiddle 演示中，单击图像表示以单击点为中心的捏合手势。随后的单击会按恒定量增加比例因子。为了使其有用，您可能希望在变换事件上更频繁地进行缩放和平移计算(hammer.js 提供了一个)。

让它工作的关键是正确计算相对于图像的比例坐标点。我使用 event.clientX/Y 获取屏幕坐标。以下行将屏幕坐标转换为图像坐标:

x -= offset.left + newX
y -= offset.top + newY

然后我们计算图像的新尺寸并找到要平移的距离。平移方程取自Stephen Woods' talk .

newWidth = image.width() * scale
newHeight = image.height() * scale

newX += -x * (newWidth - image.width) / newWidth
newY += -y * (newHeight - image.height) / newHeight

最后，我们缩放和翻译

image.css '-webkit-transform', "scale3d(#{scale}, #{scale}, 1)"         
wrap.css '-webkit-transform', "translate3d(#{newX}px, #{newY}px, 0)"

我们在包装元素上进行所有翻译，以确保翻译原点位于图像的左上角。