mouse events to touch event for ipad compatibility

Question

i have this kids painting app which uses mouse events to paint on an image. However i need to convert mouse events to touch so that it could work on an ipad. Please can someone explain me how to do this. My app code is quite similar to this sample code http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html.

P.S my knowledge about javascript is not at an a advanced level so please if you can show me working code or examples will be a great help

My code which does the mouse event are as follows. Please can covert this functionality from mouse to touch.. please i am stuck at this since 2 days now.. :|

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();

// binding events to the canvas
$('#drawingCanvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;

  paint = true; // start painting
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

  // always call redraw
  redraw();
});

$('#drawingCanvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

// when mouse is released, stop painting, clear the arrays with dots
$('#drawingCanvas').mouseup(function(e){
  paint = false;

  clickX = new Array();
  clickY = new Array();
  clickDrag = new Array();
});

// stop painting when dragged out of the canvas
$('#drawARobot').mouseleave(function(e){
  paint = false;
});


// The function pushes to the three dot arrays
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}



// this is where actual drawing happens
// we add dots to the canvas


function redraw(){

  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

Solution 1

You can map it like this:

$('#drawingCanvas').bind("mousedown touchstart", function(e){

$('#drawingCanvas').bind("mousemove touchmove", function(e){

$('#drawingCanvas').bind("mouseup touchend", function(e){

And than finetune the code if needed.

Solution 2

Try this one :

NOTE : you need jquery library .

touchmouse.js

(function() {

    /* == GLOBAL DECLERATIONS == */
    TouchMouseEvent = {
        DOWN: "touchmousedown",
        UP: "touchmouseup",
        MOVE: "touchmousemove"
    }

    /* == EVENT LISTENERS == */
    var onMouseEvent = function(event) {
        var type;

        switch (event.type) {
            case "mousedown": type = TouchMouseEvent.DOWN; break;
            case "mouseup":   type = TouchMouseEvent.UP;   break;
            case "mousemove": type = TouchMouseEvent.MOVE; break;
            default: 
                return;
        }

        var touchMouseEvent = normalizeEvent(type, event, event.pageX, event.pageY);      
        $(event.target).trigger(touchMouseEvent); 
    }

    var onTouchEvent = function(event) {
        var type;

        switch (event.type) {
            case "touchstart": type = TouchMouseEvent.DOWN; break;
            case "touchend":   type = TouchMouseEvent.UP;   break;
            case "touchmove":  type = TouchMouseEvent.MOVE; break;
            default: 
                return;
        }

        var touch = event.originalEvent.touches[0];
        var touchMouseEvent;

        if (type == TouchMouseEvent.UP) 
            touchMouseEvent = normalizeEvent(type, event, null, null);
        else 
            touchMouseEvent = normalizeEvent(type, event, touch.pageX, touch.pageY);

        $(event.target).trigger(touchMouseEvent); 
    }

    /* == NORMALIZE == */
    var normalizeEvent = function(type, original, x, y) {
        return $.Event(type, {
            pageX: x,
            pageY: y,
            originalEvent: original
        });
    }

    /* == LISTEN TO ORIGINAL EVENT == */
    var jQueryDocument = $(document);

    if ("ontouchstart" in window) {
        jQueryDocument.on("touchstart", onTouchEvent);
        jQueryDocument.on("touchmove", onTouchEvent);
        jQueryDocument.on("touchend", onTouchEvent); 
    } else {
        jQueryDocument.on("mousedown", onMouseEvent);
        jQueryDocument.on("mouseup", onMouseEvent);
        jQueryDocument.on("mousemove", onMouseEvent);
    }

})();

html page (index.html)

<!DOCTYPE html>
<html>
    <head>
        <title>touch</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf8" />
        <meta name="author" content="AUTHOR" />
        <meta name="keyword" content="KEYWORD" />
        <meta name="description" content="DESCRIPTION" />
        <script type="text/javascript" src="jquery.min.js"></script><!-- Please Download the jquery library -->
        <script type="text/javascript" src="touchmouse.js"></script>
        <script type="text/javascript">
        $(function(){
                var startdrag= false;
             $("#a").on(TouchMouseEvent.DOWN, function(){
                startdrag= true;
                move();

             });
             function move(){

                 $("#a").on(TouchMouseEvent.MOVE, function(e){
                    if(startdrag){
                    $(this).css('left',(e.pageX-50)) ;
                    $(this).css('top',(e.pageY-50));
                 }
                 });

            }
             $("#a").on(TouchMouseEvent.UP, function(e){
                startdrag= false;

             });

        });
        </script>

    </head>
    <body>
        <div id ="a" style="display:block;position:absolute;width:100px;height:100px;background:red;" ></div>
    </body>
</html>

This is working for me on android phones.

Solution 3

The problem with mouse and touch events is that they do not have the same api,

so u will need to normalize the api to have both mouse and touch inputs.

There is some solutions out there like:

• http://eightmedia.github.io/hammer.js/

And the hammer code is very easy to use:

var hamme = $("#myCanvas").hammer();

hammer.on("touch", function(e){     
   e.gesture.center.pageX;
    // ..
});

hammer.on("drag", function(e){
    e.gesture.center.pageX
   //..
})

Comments

[Photon]

Worked for me on an iPad as well, thanks for the hint!