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

回答

相關問題