Search code examples
javascriptandroidcordovatouch

The "touchmove" event on android system: Transformer Prime

I am working on a Transformer Pad and developing a drawing plate. I use PhoneGap(javascript) to write the code instead of JAVA.

But the touchmove event is quite weird.

I think as I move my finger on the pad, it will continuously to collect the coordinates which I touch on the canvas. BUT IT DOES NOT! It's ridiculous, it only collect "1" coordinate: the first point on the canvas my finger moves to.

Here are my code about the "Touch && Move event":

function touchStart(event){
    if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];     

        if (event.type == "touchstart") {
            line_start_x= touch.pageX-  canvas_org_x;
            line_start_y= touch.pageY-  canvas_org_y;
            context.beginPath();                        
            context.moveTo(line_start_x, line_start_y); 

        }//if           
    }//if 1
}//function.

function Touch_Move(event){
    line_end_x= event.touches[0].pageX-  canvas_org_x;
                line_end_y= event.touches[0].pageY-  canvas_org_y;
                context.lineTo(line_end_x, line_end_y);
                context.stroke();
                test++;                 
}

I don't know why each time I move my finger on the pad, trying to draw a line, curve, or anything I want. As the finger moves, only a VERY SHORT segment appears. So I declare a variable:"var test=0" in the beginning of this js file. I found that although I move my finger on the pad without leaving it or stopping, the value of "test" remains 1. It means that I move my finger on it. But it doesn't continuously to trigger the event: "Touch_Move".

What can I do now? I need a corresponding event to "mousemove" on touch pad. At least, the event has to continuously be triggered.

                                                                   Thank you!
Solution

  • Oh, Jesus. I finally find the answers: Please take reference for this site.

    If you work on an Android System,remember the 'touchmove' only fire ONCE as your finger moves around the pad. So if you wanna draw a line or something, you have to do this:

    function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {   // if you already work on Android system, you can        skip this step
touchEvent.preventDefault();     //THIS IS THE KEY. You can read the difficult doc released by W3C to learn more.
}

    And if you have more time, you can read the W3C's document about introducing the 'movetouch', it is REALLY hard to understand. The doc sucks.