Détection d'une pincée et mise à l'échelle de l'image en conséquence uisng javascript

Question

Comment détecter une pincée sur un périphérique tactile et l'utiliser pour manipuler un élément/une image en utilisant javascript uniquement.

Answer 1

Utilisation de dom et des événements tactiles.

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