javascript - 使用 Hammer.js 双指缩放

Question

完全归功于 Michael Chaize 和他的教程 (http://creativedroplets.com/html5-and-multitouch-hammer-js/)，我一直致力于调整他的代码以在固定设备宽度的 Web 应用程序中缩放图片。

下面的代码适用于单个图像，但我对如何让它适用于我的 Rails 应用程序中动态生成的图像列表感到困惑。

为了说明，下面的代码包含一个完整的示例页面，其中 javascript 明确绑定(bind)到显示的第一张图像。我希望代码能够检测到选择了哪个图像，以便可以缩放页面中的任何图像(目前第二个图像被忽略，因为我不知道如何优雅地将 javascript 关联到页面上的多个图像).

Hammer.js 包含在 header 中(虽然未显示在代码片段中)并且在第一张图像上正常工作。

从问题中可以看出，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>

Answer 1

如果要处理多个元素，将锤子添加到容器中，然后在监听器函数上检查相应的元素:

<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