如何从 javascript 触摸事件中获取滑动角度

Question

我有以下代码：

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

我正在尝试获取触摸移动功能中触摸滑动的角度（如果滑动超过一定度数，则取消默认滚动）。但它一直在输出 80 左右的数字。无论我如何滑动。这里有什么问题？

我正在使用它进行图像滑动，我想让用户滑动而不是同时滚动和滑动。

也许我做错了。

感谢您的帮助。

Answer 1

我做了一些测试，我认为问题可能出在你的 atan 函数上。试试 atan2？

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

它似乎基本上对我有用。

Answer 2

Math.atan(x)[1] 函数采用单个参数，在您的情况下应该是 y 与 x 的比率：

rads = Math.atan(distY/distX);

可能很难看出区别，但在您的初始代码中您有 , 而不是 /。我运行您的代码进行了此更改并且有效。请记住 Math.atan2(y,x) 确实有两个参数。

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

如何从 javascript 触摸事件中获取滑动角度

How to get angle of swipe from javascript touch events

javascript

touch