用CSS3捏缩放

Question

我正在尝试完全像在Google地图中那样实现捏合缩放手势.我观看了Stephen Woods的演讲 - "创建响应式HTML5触摸界面" - 关于这个问题,并使用了上面提到的技术.我们的想法是将目标元素的变换原点设置为(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演示

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

让它工作的关键是正确计算相对于图像的比例坐标点.我曾经event.clientX/Y得到屏幕坐标.以下行从屏幕转换为图像坐标:

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

然后我们计算图像的新大小并找到要翻译的距离.翻译等式取自Stephen Woods的谈话.

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)"

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

Answer 2

我成功地使用该片段来调整phonegap上的图像,使用锤子和jquery.

如果它对某人感兴趣,我将其翻译成JS.

function attachPinch(wrapperID,imgID)
{
    var image = $(imgID);
    var wrap = $(wrapperID);

    var  width = image.width();
    var  height = image.height();
    var  newX = 0;
    var  newY = 0;
    var  offset = wrap.offset();

    $(imgID).hammer().on("pinch", function(event) {
        var photo = $(this);

        newWidth = photo.width() * event.gesture.scale;
        newHeight = photo.height() * event.gesture.scale;

        // Convert from screen to image coordinates
        var x;
        var y;
        x -= offset.left + newX;
        y -= offset.top + newY;

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

        photo.css('-webkit-transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");      
        wrap.css('-webkit-transform', "translate3d("+newX+"px, "+newY+"px, 0)");

        width = newWidth;
        height = newHeight;
    });

}