How to move images over canvas by touch event?

Question

I've tried on this and this, but I found they only work for mouse events. I would like to drop some pictures on the canvas and let the user to "touch" on it to drag and drop. But it seems that the picture doesn't receive user's touch event, only the canvas receives the event.

Any suggestion or plugin?
ps: I develop the application on Phonegap and Android system.

Answer 1

you also need to take care of MSPointer events, that are events from Microsoft to manage touch (it was introduced with Win8 and WinPhone 8).

The steps needed, each frame:

1. detect mouse, touch and MSPointer events
2. check the cursor position colliding the images
3. move the image

For the first point:

function getCursorPositions (event, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, positions = [];

if (element.offsetParent) {
    do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
}

// Add padding and border style widths to offset
/*offsetX += stylePaddingLeft;
offsetY += stylePaddingTop;

offsetX += styleBorderLeft;
offsetY += styleBorderTop;*/

var touch = event;
//if multi-touch, get all the positions
if (event.targetTouches) { // or changedTouches
    var touchPoints = (typeof event.targetTouches !== 'undefined') ? event.targetTouches : [event];
    for (var i = 0; i < touchPoints.length; i++) {
        touch = touchPoints[i];

        positions.push({touch.pageX - offsetX, touch.pageY - offsetY});
    }
}
else {
    positions.push({touch.pageX - offsetX}, {touch.pageY - offsetY});
}

    //return positions for mouse or fingers
return positions;
}

For the second point, you have at least 2 ways to detect the collision:

you can check whether the mouse position is inside the bounding box of your item :

function pointIsInRegion (point, targetRegion, threshold) {
    return point.x >= (targetRegion.position.x - threshold) &&
        point.y >= (targetRegion.position.y - threshold) &&
        point.x <= (targetRegion.position.x + targetRegion.dimension.width + threshold) &&
        point.y <= (targetRegion.position.y + targetRegion.dimension.height + threshold);
}

Or you can be more accurate by checking the pixels collision. To achieve this second method, you have to render your items in a temporary canvas and check if there is at least pixels from your 2 items that collide (it can be accelerated by using masks).

For the third point (move the image), all you have to do is to move your image from "currentCursorPosition - previousCursorPosition". That's ths easiest part.

Anyway, I suggest you to use a framework. The code is already done and It will help you to go faster. cgSceneGraph, (I'm the designer of this framework) will do the Job for you in just few lines. Have a look at the "planner 2D" and "collision" examples (http://gwennaelbuchet.github.com/cgSceneGraph/examples.html)

Hope this can help you.