使用Javascript检测缩小并相应缩放图像

Question

如何仅在启用了触摸功能的设备上检测捏并仅使用Javascript将其用于操纵元素/图像。

Answer 1

使用dom和触摸事件。

HTML

<div id="wrapper" style="width:100%;overflow:auto;">
<img src="https://tenfizz.com/wp-content/uploads/2017/07/Untitled-1024x538.png" id="target-image" style="display:block;width:100%;transition:0.1s linear all;position:relative;transform-origin:0 0;transform:scale(1)">
</div>

Javascript

 //set the elements
 var wrapper = document.getElementById("wrapper");
 var timg = document.getElementById("target-image") , rs = 1;

 //to retrive the pinch e
 function dist(a) {
    var zw = a.touches[0].pageX - a.touches[1].pageX, zh = a.touches[0].pageY - a.touches[1].pageY;
    return Math.sqrt(zw * zw + zh * zh);
  }

  //attach the events
  wrapper.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault();
      d1 = dist(event);
    }
  });
  wrapper.addEventListener('touchmove', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault();

      //get the ratio
      rf = dist(event) / d1 * rs;
      timg.style.transform = "scale(" + rf + ")";
    }
  });

  //check if scale is less than 1 and keep the previous ratio
  wrapper.addEventListener('touchend', function() {
    rf < 1 ? (timg.style.transform = "scale(1)", rs = 1) : rs = rf;
  });