用CSS3缩放 [英] Pinch to zoom with CSS3
问题描述
我尝试在Google地图中实施缩放到手指缩放手势。我观看了Stephen Woods的演讲 - Creating Responsive HTML5 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如何在transform回调中调整我的计算,使图像保持在变换点的中心?
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演示中,点击图片表示以点击点为中心的捏合手势。后续点击将比例因子增加一个常量。为了使它变得有用,你需要在一个变换事件上使scale和translate计算更加频繁(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屋!