使用 CSS3 进行缩放 [英] Pinch to zoom with CSS3

问题描述

我正在尝试实现与 Google 地图中完全相同的捏合缩放手势.我观看了 Stephen Woods 的演讲 - "Creating ResponsiveHTML5 Touch Interfaces" - 关于这个问题并使用了提到的技术.想法是将目标元素的变换原点设置为 (0, 0) 并在变换点缩放.然后将图像转换为保持在变换点的中心.

I'm trying to implement pinch-to-zoom gestures exactly as in Google Maps. I watched a talk by Stephen Woods - "Creating Responsive HTML5 Touch Interfaces" - about the issue and used the technique mentioned. The idea is to set the transform origin of the target element at (0, 0) and scale at the point of the transform. Then translate the image to keep it centered at the point of transform.

在我的测试代码缩放工作正常.图像在后续翻译之间放大和缩小.问题是我没有正确计算翻译值.我将 jQuery 和 Hammer.js 用于触摸事件.如何在转换回调中调整我的计算，以使图像保持在转换点的中心?

In my test code scaling works fine. The image zooms in and out fine between subsequent translations. The problem is I am not calculating the translation values properly. I am using jQuery and Hammer.js for touch events. How can I adjust my calculation in the transform callback so that the image stays centered at the point of transform?

CoffeeScript(#test-resize 是一个带有背景图像的 div)

The CoffeeScript (#test-resize is a div with a background image)

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

推荐答案

我设法让它工作了.

jsFiddle 演示

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

In the jsFiddle demo, clicking on the image represents a pinch gesture centred at the click point. Subsequent clicks increase the scale factor by a constant amount. To make this useful, you would want to make the scale and translate computations much more often on a transform event (hammer.js provides one).

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

The key to getting it to work was to correctly compute the point of scale coordinates relative to the image. I used event.clientX/Y to get the screen coordinates. The following lines convert from screen to image coordinates:

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

然后我们计算图像的新尺寸并找到要平移的距离.翻译方程取自 Stephen Woods 的谈话.

Then we compute a new size for the image and find the distances to translate by. The translation equation is taken from 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)"

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

We do all our translations on a wrapper element to ensure that the translate-origin stays at the top left of our image.

这篇关于使用 CSS3 进行缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！