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 .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();
}
}
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();
}
}
- Please see stackoverflow./questions/1517924/… – Ishan Jain Commented Jul 12, 2013 at 11:24
4 Answers
Reset to default 9You 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.
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
//..
})
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.
You can try also - jQuery UI Touch Punch
Click Here