javascript - 使用 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);
});

如果您需要更多信息，请告诉我。