Question

I am trying to create a HTML5 web application for iPhone. I am using jQuery Mobile for it. My application involves drawing in canvas. It is much like a paint application that utilizes the canvas for rendering the sketch. A user can swipe across the screen from any direction and the app should be able to figure out the positions and then draw line across the points.

jQuery Mobile provides only some of the following basic event for the swipe control but I think I need some more control over the swipe since user can swipe in any direction and can be any pixel long. On the other hand I should be able to capture most of the points so that I could visualize the drawing more clearly and precisely.

tap
Triggers after a quick, complete touch event.
taphold
Triggers after a held complete touch event (close to one second).
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.
swipeleft
Triggers when a swipe event occurred moving in the left direction.
swiperight
Triggers when a swipe event occurred moving in the right direction.

Is there any other techniques that I should follow to create a drawing application in the canvas for iOs applications? Any help will be appreciated.

Answer 1

Some events you missed on the Event page of the jQuery Mobile Documentation are the virtual events: http://jquerymobile.com/demos/1.0/docs/api/events.html

vmousedown
    Normalized event for handling touchstart or mousedown events

vmousemove
    Normalized event for handling touchmove or mousemove events

vmouseup
    Normalized event for handling touchend or mouseup events

vmousecancel
    Normalized event for handling touch or mouse mousecancel events

I would use the vmousedown event to start tracking the cursor’s movement, vmousemove to continue tracking the path of the cursor, and vmouseup to finish tracking the cursor’s movement.

A simple example would be:

//setup a variable to store the cursor's movement
var tracks = [];

//bind to the three events described above
$(document).bind('vmousedown vmousemove vmouseup', function (event) {

    //check to see what event is being fired
    if (event.type == 'vmousedown') {

        //if the `vmousedown` event is fired then reset the value of the `tracks` variable and add the first point to the variable
        tracks = [{ x : event.pageX, y : event.pageY}];
    } else if (event.type == 'vmousemove') {

        //if the `vmousemove` event is fired then add a new point to the `tracks` variable
        tracks.push({ x : event.pageX, y : event.pageY});
    } else if (event.type == 'vmouseup') {

        //if the `vmouseup` event is fired then the user is done drawing and you can draw their line for them
    }
});