使用Hammerjs捏和放大圖像

Question

所以我有一個標題..和一個圖像。在平板電腦上，我想能夠捏和放大圖像，但我很掙扎。我看過其他類似的問題。但是，當我還在學習時，我並不完全確定我的錯誤對我來說太過於糾正。

<div class="header"> 
     <h1><img src="logo.png" alt="">Title</h1> 
     <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
     </ul> 
    </div> 


    <div id="map"> 
     <div> 
     <img src="bg.png" alt="" width="1200" id="mapImage"> 
     </div> 
    </div> 

    <script src="https://hammerjs.github.io/dist/hammer.js"></script> 

以下是我正在使用的Javascript試圖讓捏和縮放工作正常。我正在使用hammer.js。

<script> 
    var hammertime = Hammer(document.getElementById('map'), { 
    transform_always_block: true, 
    transform_min_scale: 1, 
    drag_block_horizontal: false, 
    drag_block_vertical: false, 
    drag_min_distance: 0 
    }); 

    var rect = document.getElementById('mapImage'); 

    var posX=0, posY=0, 
     scale=1, last_scale, 
     last_posX=0, last_posY=0; 

    hammertime.on('touch drag transform dragend', function(ev) { 
    console.log(ev); 
     switch(ev.type) { 
      case 'touch': 
       last_scale = scale; 
       break; 

      case 'drag': 
       posX = last_posX + ev.gesture.deltaX; 
       posY = last_posY + ev.gesture.deltaY; 
       break; 

      case 'transform': 
       scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10)); 
       break; 
      case 'dragend': 
       last_posX = posX; 
       last_posY = posY; 
       break; 
     } 

     // transform! 
     var transform = ""; 
     if(scale > 1){ 
      transform = 
       "translate3d("+posX+"px,"+posY+"px, 0) " + 
       "scale3d("+scale+","+scale+", 0) "; 
     }else{ 
      transform = 
       "translate3d(0, 0, 0) " + 
       "scale3d(1, 1, 0) "; 
      posX = 0; 
      posY = 0; 
      last_posX = 0; 
      last_posY = 0; 
     } 

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

感謝您的幫助！

Answer 1

我在一頁中做了類似的工作。 PFB我的代碼：

var scale = 1; 
var myElement = document.getElementById('map'); 

var hammertime = new Hammer(myElement); 
hammertime.get('pinch').set({enable: true}); 

hammertime.on("pinchin", function(e) { 
    scale -= 0.02; 
    $('#map img').css('zoom', scale); 
}); 

hammertime.on("pinchout", function(e) { 
    scale += 0.02; 
    $('#map img').css('zoom', scale); 
}); 

如果您需要更多信息，請讓我知道。