Pinch-zoom with Hammer.js

完全感谢Michael Chaize和他的教程（http://creativedroplets.com/html5-and-multitouch-hammer-js/），我一直在努力调整他的代码以便在固定设备宽度的webapp中缩放图片。Pinch-zoom with Hammer.js

下面的代码很适合单个图像，但我很难理解如何让它在我的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>

来源

2014-02-23 user3343856

如果你想与多个元素的工作，锤子添加到容器中，然后在监听功能，请检查相应元素：

<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

来源

2015-11-26 17:17:05 ElChiniNet

Pinch-zoom with Hammer.js

回答

相关问题