자바 스크립트를 사용하여 핀치 및 눈금 이미지 감지

Question

터치 지원 장치에서 핀치를 감지하고이를 사용하여 javascript를 사용하여 요소/이미지를 조작하는 방법.

Answer 1

dom 및 touch 이벤트 사용.

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> 

자바 스크립트

//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; 
    });