Wie von Javascript-Touch-Ereignissen Winkel Swipe bekommen

Question

Ich habe den folgenden Code:

swipeDetect = function(el, callback){ 

    var touchsurface = el, 
    swipedir, 
    startX, 
    startY, 
    distX, 
    distY, 
    threshold = 7, //required min distance traveled to be considered swipe 
    restraint = 100, // maximum distance allowed at the same time in perpendicular direction 
    allowedTime = 500, // maximum time allowed to travel that distance 
    maxangle=40, 
    elapsedTime, 
    startTime, 
    touchinprocess=false, 
    handleswipe = callback || function(swipedir){}; 

    touchsurface.addEventListener('touchstart', function(e){ 

     touchinprogress = true; 
     var touchobj = e.changedTouches[0]; 
     swipedir = 'none'; 
     dist = 0; 
     startX = touchobj.pageX; 
     startY = touchobj.pageY; 
     startTime = new Date().getTime(); 
    }, false); 

    touchsurface.addEventListener('touchmove', function(e){ 


     var touchobj = e.changedTouches[0]; 
     distX = startX - touchobj.pageX; 
     distY = startY - touchobj.pageY; 
     rads = Math.atan(distY,distX); 
     var deg = rads * (180/3.14); 
     console.log(deg); 
     if (Math.abs(distY) > restraint && Math.abs(deg) > maxangle) e.preventDefault(); 

    }, false); 

    touchsurface.addEventListener('touchend', function(e){ 

     var touchobj = e.changedTouches[0]; 
     distX = touchobj.pageX - startX; 
     distY = touchobj.pageY - startY; 
     elapsedTime = new Date().getTime() - startTime; 

     if (elapsedTime <= allowedTime){ // first condition for awipe met 
      if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met 
       swipedir = (distX < 0)? 'left' : 'right'; // if dist traveled is negative, it indicates left swipe 
      } 
      else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met 
       swipedir = (distY < 0)? 'up' : 'down'; // if dist traveled is negative, it indicates up swipe 
      }; 
     }; 
     handleswipe(e,swipedir); 
     return true; 
    }, false); 
}, 

Ich versuche, den Winkel in Grad eines Touch Swipe im Touch Move-Funktion zu erhalten (und den Standard töten scrollen, wenn der Swipe über einer bestimmten Anzahl von Graden liegt). Aber es gibt Zahlen um die 80 aus. Egal, wie ich wische. Was ist hier falsch?

Ich benutze dies für das Bild Wischen und ich möchte den Benutzer wischen lassen und nicht gleichzeitig scrollen und streichen lassen.

Vielleicht mache ich das alles falsch.

Danke für Ihre Hilfe.

Answer 1

Die Math.atan(x) [1] Funktion ein einziges Argument nimmt, sollte das Verhältnis von y über x, die in Ihrem Fall sein:

rads = Math.atan(distY/distX);

Es könnte schwierig sein, den Unterschied zu sehen, aber in Ihrer ersten Code haben Sie eine , anstelle einer /. Ich habe Ihren Code mit dieser Änderung ausgeführt und es hat funktioniert. Beachten Sie, dass Math.atan2(y,x) zwei Argumente benötigt.

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan

Answer 2

Ich habe einige Tests durchgeführt und ich denke, das Problem kann mit Ihrer Atan-Funktion sein. Gib atan2 einen Versuch?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2

Es scheint, im Wesentlichen für mich zu arbeiten.