使用Hammer.js识别对角手势（滑动）。

Question

使用Hammer.js是否可以识别对角线滑动？

我已经阅读了他们的文档，但没有找到关于对角线滑动或平移等内容的说明...

- vamsi

Answer 1

每个Hammer.js事件回调函数都会传递一个包含手势信息的对象（如API文档中所述）。 eventObject.angle属性是你要找的东西。它的值在-180到180之间（0表示RIGHT，-90表示UP，90表示DOWN，180表示LEFT）。

因此，以下是如何识别对角线滑动的方法：

var hammertime = new Hammer(domElement);
hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
hammertime.on("swipe", function(eventObject) {
    if(eventObject.angle < -90) {
        //UP-LEFT SWIPE...
    } else if(eventObject.angle < 0) {
        //UP-RIGHT SWIPE...
    } else if(eventObject.angle < 90) {
        //DOWN-RIGHT SWIPE...
    } else {
        //DOWN-LEFT SWIPE...
    }
});

- Guglie

Answer 2

对于那些想要使用HammerJS实现8向滑动（上、下、左、右、左上、左下、右上、右下）选项的人，值得研究在一系列值范围内使用角度。左侧选项是唯一聪明的选项...因为它是一个OR语句而不是AND语句。

    var hammertime = new Hammer(domElement);
    hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
    hammertime.on("swipe", function(e) {

      let jResult = '';

      switch(true) {

            // LEFT
            case (e.angle < -157.5 || e.angle > 157.5):
                jResult = 'left'; 
                break;

            // RIGHT
            case (e.angle > -22.5 && e.angle < 22.5):
                jResult = 'right'; 
                break;

            // UP
            case (e.angle < -67.5 && e.angle > -112.5):
                jResult = 'up'; 
                break;

            // Down
            case (e.angle > 67.5 && e.angle < 112.5):
                jResult = 'down'; 
                break;

            // LEFT-Up
            case (e.angle < -112.5 && e.angle > -157.5):
                jResult = 'left-Up'; 
                break;

            // LEFT-Down
            case (e.angle > 112.5 && e.angle < 157.5):
                jResult = 'left-Down'; 
                break;

            // RIGHT-Up
            case (-22.5 > e.angle && e.angle > -67.5):
                jResult = 'right-Up'; 
                break;

            // RIGHT-Down
            case (e.angle > 22.5 && e.angle < 67.5):
                jResult = 'right-Down'; 
                break;

            default:
                // code block
                jResult = 'unknown'; // UNKNOWN - what happened?
            }
        console.log('--00--> Swipe: ' + e.direction + ' -- Dir is: ' + jResult);
        this.lastSwipe = jResult;  
    });

输出结果显示在控制台上... 实际效果可能有所不同。

- Vergel Evans