Does anyone know of a really good Javascript pinch-zooming algorithm? This is trickier than I had imagined, as you have to scale -AND- translate to keep the pinch zooming centered between your fingers. And I want it to do pure translation when the user moves two fingers - kept an equal distance apart from each other - around the screen, i.e., this moving two fingers in unison should act like a single- finger "pan".
<script>var dist1=0; function start(ev) { if (ev.targetTouches.length == 2) {//check if two fingers touched screen dist1 = Math.hypot( //get rough estimate of distance between two fingers ev.touches[0].pageX - ev.touches[1].pageX, ev.touches[0].pageY - ev.touches[1].pageY); } } function move(ev) { if (ev.targetTouches.length == 2 && ev.changedTouches.length == 2) { // Check if the two target touches are the same ones that started var dist2 = Math.hypot(//get rough estimate of new distance between fingers ev.touches[0].pageX - ev.touches[1].pageX, ev.touches[0].pageY - ev.touches[1].pageY); //alert(dist); if(dist1>dist2) {//if fingers are closer now than when they first touched screen, they are pinching alert('zoom out'); } if(dist1<dist2) {//if fingers are further apart than when they first touched the screen, they are making the zoomin gesture alert('zoom in'); } } } document.getElementById ('zoom_here').addEventListener ('touchstart', start, false); document.getElementById('zoom_here').addEventListener('touchmove', move, false);</script>
<div class='zoom_here'></div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)