события мыши на сенсорное событие для совместимости с ipad

Question

У меня есть приложение для рисования для детей, которое использует события мыши для рисования на изображении. Однако мне нужно преобразовать события мыши в касание, чтобы он мог работать на ipad. Пожалуйста, кто-нибудь может объяснить мне, как это сделать. Мой код приложения очень похож на этот пример кода http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html.

P.S мои знания о JavaScript не на более высоком уровне, так, пожалуйста, если вы можете показать мне рабочий код или примеры будут большим подспорьем

Мой код, который делает событие мыши заключаются в следующем. Пожалуйста, можете скрывать эту функциональность от мыши до касания .. пожалуйста, я застрял на этом с 2 дня сейчас ..: |

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(); 
    } 
} 

Answer 1

Вы можете отобразить это следующим образом:

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

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

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

И чем точно настроить код, если это необходимо.

Answer 2

Проблема с мышью и сенсорными событий является то, что они не имеют тот же интерфейс,

так и нужно будет нормализовать апи иметь обе мыши и сенсорные входы.

Существует несколько решений там, как:

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

И код Молоток очень прост в использовании:

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

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

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

Answer 3

Попробуйте это:

ПРИМЕЧАНИЕ: вам нужна библиотека jquery ,

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 страницы (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> 

Это работает для меня на андроид телефонов.

Answer 4

Вы можете попробовать также - jQuery UI Touch Punch

Click Here