Hammer.js实现Pinch-zoom

Question

感谢Michael Chaize及其教程（http://creativedroplets.com/html5-and-multitouch-hammer-js/），我一直在尝试将他的代码应用于在固定设备宽度Web应用中缩放图片。下面的代码适用于单个图像，但我无法让它适用于我Rails应用程序中动态生成的图像列表。

为了说明问题，下面的代码包括一个完全可工作的示例页面，其中Javascript明确地与显示的第一张图像相关联。我希望代码能够检测到选择的是哪个图像，以便可以缩放页面上的任何图像（当前忽略第二个图像，因为我不知道如何优雅地将Javascript关联到页面上的多个图像）。

Hammer.js已包含在头部中（虽然未在代码片段中显示），并且在第一张图像上正常工作。

正如您从问题中可以看出的那样，Javascript不是我的强项，因此非常感谢任何指导。

<div id="zoomwrapper1">
  <div id="zoom1" class="zoomProps" >
    <div id="rect1" class="polaroid">
        <img id="rect" src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" width="100%" ondragstart="return false" alt="" />
        <span>Sample</span>
    </div>
  </div>
</div>

<div id="zoomwrapper2">
  <div id="zoom2" class="zoomProps" >
    <div id="rect2" class="polaroid">
        <img id="rect2" src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" width="100%" ondragstart="return false" alt="" />
        <span>Sample</span>
    </div>
  </div>
</div>


<script>

    var hammertime = Hammer(document.getElementById('zoomwrapper1'), {
            transform_always_block: true,
            transform_min_scale: 1,
            drag_block_horizontal: true,
            drag_block_vertical: true,
            drag_min_distance: 0
        });

        var posX=0, posY=0,
            lastPosX=0, lastPosY=0,
            bufferX=0, bufferY=0,
            scale=1, last_scale,
            rotation= 1, last_rotation, dragReady=0;

        hammertime.on('touch transform', function(ev) {
            elemRect = document.getElementById('zoom1');
            manageMultitouch(ev);
        });


    function manageMultitouch(ev){

    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;

            break;

        case 'drag':
                posX = ev.gesture.deltaX + lastPosX;
                posY = ev.gesture.deltaY + lastPosY;
            break;

        case 'transform':
            rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;

        case 'dragend':
            lastPosX = posX;
            lastPosY = posY;
            break;
    }

    var transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) ";

    elemRect.style.transform = transform;
    elemRect.style.oTransform = transform;
    elemRect.style.msTransform = transform;
    elemRect.style.mozTransform = transform;
    elemRect.style.webkitTransform = transform;
}
</script>

- user3343856

Answer 1

如果您想使用多个元素进行操作，将hammer添加到容器中，然后在监听函数中检查相应的元素即可。

<div id="box-container">
    <div id="box0" class="box">1</div>
    <div id="box1" class="box">2</div>
    <div id="box2" class="box">3</div>
    <div id="box3" class="box">4</div>
    <div id="box4" class="box">5</div>
</div>

在JavaScript中

var hammertime = Hammer(document.getElementById("#box-container"));

hammertime.on('desired-event', function(evt) {

    if(evt.target.className.indexOf("box") > -1);

        //do the stuff

    }

});

以下是一个使用jQuery的工作示例（在多点触摸设备上测试）：

jsfiddle

- ElChiniNet