轻拍手势 [英] tap gesture

查看:71
本文介绍了轻拍手势的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

大家好。


所以,我仍在使用指针和手势apis,我对攻击的含义感到好奇。好的,所以最好在继续之前定义tap。对我而言,点击意味着将手指放在一个元素中,以获得非常少量的
时间。在接触过程中,有可能进行一次小动作(向上,向下,向左,向右)。现在,我认为将手指放下超过特定时间阈值可能会"促进"轻拍一下,对吗?但是如果时间阈值
没有被击中,那么它应该总是被认为是一个敲击而不是保持,即使在它仍然与元素接触时可能会有一些手指移动。这是正确的吗?


正如我所说,我还在玩api,所以我改变了我的演示应用程序(允许我在svg中绘制并进行一些平移)所以它将处理点击事件。为此,我使用以下代码初始化了我的GestureRecognizer:


function inicializaGestos(){

    gestureRecognizer = new Windows.UI.Input.GestureRecognizer();

    gestureRecognizer.gestureSettings = Windows.UI.Input.GestureSettings.tap;

    gestureRecognizer.addEventListener(" tapped",onTapped);

}


由于我只对tap有兴趣,我认为我不需要任何其他东西。由于我仍然处理指针向下,移动和向上事件,我认为这是将它们重定向到手势API的完美位置,如果我在appbar上有这个选项:


function pointerDown (evt){       

    if(evt.pointerType === 4&& evt.button!== 1){

       返回;

    }     

    if(currentCmd.id ==" desenhar"){          

        retangulo.x = evt.offsetX;

        retangulo.y = evt.offsetY;

        retangulo.atualizaFigura(figuraAuxiliar);

        area.appendChild(figuraAuxiliar);

        evt.preventMouseEvent();

    }¥b $ b   否则{

        console.log("传递给手势");

        gestureRecognizer.processDownEvent(evt.currentPoint);

    }       

    pointerID = evt.pointerId;

    evt.target.msSetPointerCapture(pointerID);

}

函数pointerMove(evt){

    if(evt.pointerId!== pointerID)返回;

    evt.preventMouseEvent();

    if(currentCmd.id ===" desenhar"){

        retangulo.width = evt.offsetX - retangulo.x;

        retangulo.height = evt.offsetY - retangulo.y;

        retangulo.atualizaFigura(figuraAuxiliar);

        retangulo.log();

    }¥b $ b   否则{

        gestureRecognizer.processMoveEvents(evt.intermediatePoints);

    }
}

函数pointerUp(evt){

    evt.preventMouseEvent();

    if(currentCmd.id ===" desenhar"){

        figuraAuxiliar = inicializaFigura();

        retangulo.efetuaReset();

    }¥b $ b   否则{

        gestureRecognizer.processUpEvent(evt.currentPoint);

    }¥b $ b    evt.target.msReleasePointerCapture(pointerID);

    pointerID = null;

}


在继续之前,我还应该提一下我的svg设置为父级的120% (正文元素)我现在也支持平移(从应用栏中选择绘制或点按选项会导致将body元素的-ms-touch-action设置为无)。


现在,由于我没有标签,我正在使用模拟器测试我的应用程序。每当我在rect中进行简单的触摸时(因为我使用鼠标,这意味着只需单击),我的tapped方法就会被调用。但是,如果我按住鼠标并稍微按下,则不再调用
事件。这可能意味着我错过了什么,但是什么?


谢谢




Luis Abreu

解决方案

哇, 我的朋友有很多信息: - )。


手势与MSPointer事件不同。 想想点击一下......按下并释放......想一想在等待论坛答案时不耐烦地敲击桌面上的手指。 这有帮助吗? 听起来你想要
MSPointerDown和MSPointerMove 事件,你正在做什么。 请参阅BallinEight示例:输入:使用JavaScript示例进行操作和手势           


那就是说,看看他们是如何设置点击处理程序的...... 在模拟器中运行它,然后点击或鼠标单击字段(不在球上),您将看到处理程序被调用。


-Jeff



Hello guys.

So, I'm still playing with the pointer and gesture apis and I'm a little but curious about the meaning of tapping. Ok, so it's probably best to define tap before going on. TO me, tap means putting the finger down in an element for a really small amount of time. During the contact, there's a probability of making a small move (up, down, left, right). Now, I believe that putting the finger down for more than a specific time threshold will probably "promote" the tap to a hold, right? But if that time threshold isn't hit, then it should always be considered a tap and not a hold, even though there might be some finger movement while it's still in contact with the element. Is this correct?

As I said, I'm still playing with the api and so I've changed my demo app (which allows me to draw in svg and do some panning) so that it will process tap events. In order to do that, I've initialized my GestureRecognizer with the following code:

function inicializaGestos(){
    gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
    gestureRecognizer.gestureSettings = Windows.UI.Input.GestureSettings.tap;
    gestureRecognizer.addEventListener("tapped", onTapped);
}

Since I'm only interested in tap, I think I don't need anything more. Since I'm still handling the pointer down, move and up events, I think this is the perfect place to redirect them to the gesture API if I've got that option on the appbar:

function pointerDown(evt) {        
    if (evt.pointerType === 4 && evt.button !== 1) {
        return;
    }      
    if (currentCmd.id == "desenhar") {           
        retangulo.x = evt.offsetX;
        retangulo.y = evt.offsetY;
        retangulo.atualizaFigura(figuraAuxiliar);
        area.appendChild(figuraAuxiliar);
        evt.preventMouseEvent();
    }
    else {
        console.log("passing to gesture");
        gestureRecognizer.processDownEvent(evt.currentPoint);
    }        
    pointerID = evt.pointerId;
    evt.target.msSetPointerCapture(pointerID);
}
function pointerMove(evt) {
    if (evt.pointerId !== pointerID) return;
    evt.preventMouseEvent();
    if (currentCmd.id === "desenhar") {
        retangulo.width = evt.offsetX - retangulo.x;
        retangulo.height = evt.offsetY - retangulo.y;
        retangulo.atualizaFigura(figuraAuxiliar);
        retangulo.log();
    }
    else {
        gestureRecognizer.processMoveEvents(evt.intermediatePoints);
    }
}
function pointerUp(evt) {
    evt.preventMouseEvent();
    if (currentCmd.id === "desenhar") {
        figuraAuxiliar = inicializaFigura();
        retangulo.efetuaReset();
    }
    else {
        gestureRecognizer.processUpEvent(evt.currentPoint);
    }
    evt.target.msReleasePointerCapture(pointerID);
    pointerID = null;
}

before going on, I should also mention that my svg is set to 120% of the parent (body element) and that I'm currently supporting panning too (choosing draw or tap option from the app bar results in setting the body element's -ms-touch-action to none).

Now, since i don't have a tab, I'm using the simulator to test my app. Whenever I to a simple touch in the rect (since I'm using the mouse, this means just clicking ), my tapped method gets called. However, if I hold the mouse and do a slight press, the event no longer gets called. This probably means I'm missing something, but what?

thanks


Luis Abreu

解决方案

Wow,  Lots of info there my friend :-).

Gestures are different then MSPointer events.  Think of a tap as just that... a press and release... think of tapping your fingers impatiently on the desk while waiting for a forum answer.  Does that help?  It sounds like you want the MSPointerDown and MSPointerMove events for what you are doing.  See the BallinEight sample: Input: manipulations and gestures using JavaScript sample           

That said, see how they are setting up the tapped handler...  Run this in the simulator and tap or mouse click in the field (not on the ball) and you will see the handler is called.

-Jeff


这篇关于轻拍手势的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆