WinJS gestureRecognizer - 如何捕获多个手势

时间:2013-05-02 15:40:15

标签: javascript html5 windows-8 winjs gesture-recognition

我一直在使用this文章(以及其他一些文章)尝试在我的应用中实现手势识别,它确实有效。但是,我想要做的是检测多个手势;例如,滑动和触摸。我似乎无法做的是确定MouseUp事件是由手势结束还是单次触摸引起的。

function processUpEvent(e) {
    lastElement = e.currentTarget;
    gestureRecognizer.processUpEvent(e.currentPoint);

    processTouchEvent(e.currentPoint);
}

目前发生的事情是两者都处理过。如何检测用户是否已“放开”屏幕进行滑动或触摸?

编辑:

    var recognizer = new Windows.UI.Input.GestureRecognizer();        

    recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationTranslateX
    recognizer.addEventListener('manipulationcompleted', function (e) {
        var dx = e.cumulative.translation.x
        //Do something with direction here
    });

    var processUp = function (args) {
        try {
            recognizer.processUpEvent(args.currentPoint);
        }
        catch (e) { }
    }

    canvas.addEventListener('MSPointerDown', function (args) {
        try {
            recognizer.processDownEvent(args.currentPoint);
        }
        catch (e) { }
    }, false);

    canvas.addEventListener('MSPointerMove', function (args) {
        try {
            recognizer.processMoveEvents(args.intermediatePoints);
        }
        catch (e) { } 
    }, false);
    canvas.addEventListener('MSPointerUp', processUp, false);
    canvas.addEventListener('MSPointerCancel', processUp, false);

所以我需要同时处理processUpmanipulationcompleted,但其中一个。

2 个答案:

答案 0 :(得分:1)

您可以在codeSHOW中查看我的“输入”演示。只需安装codeSHOW应用程序(http://aka.ms/codeshowapp)并查看指针输入演示并“查看代码”或转到source code on CodePlex。 希望有所帮助。

答案 1 :(得分:1)

我找到了一种方法,但它并不漂亮:

var eventFlag = 0;

var processUp = function (args) {
    try {
        recognizer.processUpEvent(args.currentPoint);

        if (eventFlag == 0) {
           // do stuff
        } else {
           eventFlag = 0;
        }
    }
    catch (e) { }
}

recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationTranslateX
recognizer.addEventListener('manipulationcompleted', function (e) {
    var dx = e.cumulative.translation.x
    //Do something with direction here
    eventFlag = 1;
});