用于触摸设备的画布绘图应用

Question

Hallo stackoverflooow community, I have a little problem with my small drawing app. It works perfect on desktop but not on touch devices. The App just make a point when I touch the display. I hope somebody can help me.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var radius = 5;
context.lineWidth = radius*2;
var press = false;

var putPoint = function(e){
    if(press){
    context.beginPath();
    context.arc(e.offsetX, e.offsetY, radius, 0, 2*Math.PI);
    context.fill();
    }
}

var start = function(e){
    press = true;
    putPoint(e);
    context.beginPath();
    context.moveTo(e.offsetX, e.offsetY);
}

var move = function(e){
    context.lineTo(e.offsetX, e.offsetY);
    context.stroke();
    putPoint(e);
    context.beginPath();
    context.moveTo(e.offsetX, e.offsetY);
}

var stop = function(){
press = false;
context.beginPath();
}

//mouse
canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', move);
canvas.addEventListener('mouseup', stop);

//touch
canvas.addEventListener('touchstart', start);
canvas.addEventListener('touchmove', move);
canvas.addEventListener('touchend', stop);

`

Answer 1

The problem with misbehaving touch events generally comes from the differences between the way that touch events and mouse events work. Mouse events only occur one at a time, since there's only one mouse pointer. Touch events on the other hand, need to deal with multi-touch events. Eg one finger goes down, it moves and then another goes down. We've now got 2 touchstart events, and 1 touch move event. It gets pretty complicated pretty fast.

I forget where I got it from now, (sorry original author) but here's the code that I use in one of my applications. The function is attached to all three types of touch events - touchstart, touchmove and touchend. It doesn't deal with multi-touch, simply ignoring any events that happen when more than one finger is touching the input device. It then creates a synthetic mouse-event, which is then passed onto the normal mouse event handlers.

function onCanvasTouch(evt)
{
    if (evt.touches.length > 1 )
        return;

    if ((evt.type == "touchend" && evt.touches.length > 0))
    {
        evt.preventDefault();
        return;
    }

    evt.preventDefault();

    var newEvt = document.createEvent("MouseEvents");
    var type = null;
    var touch = null;
    switch (evt.type)
    {
        case "touchstart":
            type = "mousedown";
            touch = evt.changedTouches[0];
            break;
        case "touchmove":
            type = "mousemove";
            touch = evt.changedTouches[0];
            break;
        case "touchend":
            type = "mouseup";
            touch = evt.changedTouches[0];
            break;
    }

    newEvt.initMouseEvent(
                            type, true, true, evt.target, 0,
                            touch.screenX, touch.screenY, touch.clientX, touch.clientY,
                            evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null
                        );

    evt.target.dispatchEvent(newEvt);
}