Table of Content
Drawing with touch
1// interaction 2(function(){ 3 var isDrawing = false; 4 var startX = startY = 0; 5 6 // Pen Down 7 canvas.bind('touchstart mousedown', function(e){ 8 isDrawing = true; 9 if (e.originalEvent.touches) { // touch device 10 var mouseX = e.originalEvent.touches[0].pageX - canvas.offset().left; 11 var mouseY = e.originalEvent.touches[0].pageY - canvas.offset().top; 12 } else { // mouse device 13 var mouseX = e.pageX - canvas.offset().left; 14 var mouseY = e.pageY - canvas.offset().top; 15 } 16 startX = mouseX; 17 startY = mouseY; 18 }); 19 20 // Pen Move 21 canvas.bind('touchmove mousemove', function(e){ 22 if (isDrawing) 23 { 24 if (e.originalEvent.touches) { // touch device 25 var mouseX = e.originalEvent.touches[0].pageX - canvas.offset().left; 26 var mouseY = e.originalEvent.touches[0].pageY - canvas.offset().top; 27 } else { // mouse device 28 var mouseX = e.pageX - canvas.offset().left; 29 var mouseY = e.pageY - canvas.offset().top; 30 } 31 drawingPad.drawLine(startX, startY, mouseX, mouseY, 3); 32 startX = mouseX; 33 startY = mouseY; 34 } 35 }); 36 37 // Pen Up 38 canvas.bind('touchend mouseup', function(e) { 39 isDrawing = false; 40 }); 41})();
What’s next? We’re going to take a look at “Mirror drawing”.
