All geek questions in one place

How can I get this HTML5 canvas painting app to work for both touch and mouse events?

Here is the source code of what I'm trying to do:

http://jsfiddle.net/3nGtM/

JavaScript:

window.addEventListener('load', function () { // get the canvas element and its context var canvas = document.getElementById('sketchpad'); var context = canvas.getContext('2d'); // create a drawer which tracks touch movements var drawer = { isDrawing: false, touchstart: function (coors) { context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function (coors) { if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function (coors) { if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; // create a function to pass touch events and coordinates to drawer function draw(event) { // get the touch coordinates var coors = { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; // pass the coordinates to the appropriate handler drawer[event.type](coors); } // attach the touchstart, touchmove, touchend event listeners. canvas.addEventListener('touchstart', draw, false); canvas.addEventListener('touchmove', draw, false); canvas.addEventListener('touchend', draw, false); // prevent elastic scrolling document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); // end body.onTouchMove }, false); // end window.onLoad

HTML:

 <body> <div id="container"> <canvas id="sketchpad" width="400" height="400">Sorry, your browser is not supported.</canvas> </div> </body>

CSS

 body { margin:0; padding:0; font-family:Arial; } #container { position:relative; } #sketchpad { border: 1px solid #000; }

I tried adding event listeners for the mouse up / down / move, but they didn't seem to work.

Alternatively, if anyone has suggestions for using open source canvas apps that work on a computer and tablet, I would rather use this.

So far, only https://github.com/PlayMyCode/SkyBrush stands out, but unfortunately it does not work on Android tablets (at least the ones I could try).

+4
source share
1 answer

Check the modified script

I added a detection method when working in the touch device and a switch to display mouse events, to touch events.

Also note that when indirectness occurs, we must use event.changedTouches to get coors .

 window.addEventListener('load', function () { // get the canvas element and its context var canvas = document.getElementById('sketchpad'); var context = canvas.getContext('2d'); // create a drawer which tracks touch movements var drawer = { isDrawing: false, touchstart: function (coors) { context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function (coors) { if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function (coors) { if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; // create a function to pass touch events and coordinates to drawer function draw(event) { var type = null; // map mouse events to touch events switch(event.type){ case "mousedown": event.touches = []; event.touches[0] = { pageX: event.pageX, pageY: event.pageY }; type = "touchstart"; break; case "mousemove": event.touches = []; event.touches[0] = { pageX: event.pageX, pageY: event.pageY }; type = "touchmove"; break; case "mouseup": event.touches = []; event.touches[0] = { pageX: event.pageX, pageY: event.pageY }; type = "touchend"; break; } // touchend clear the touches[0], so we need to use changedTouches[0] var coors; if(event.type === "touchend") { coors = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY }; } else { // get the touch coordinates coors = { x: event.touches[0].pageX, y: event.touches[0].pageY }; } type = type || event.type // pass the coordinates to the appropriate handler drawer[type](coors); } // detect touch capabilities var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window); // attach the touchstart, touchmove, touchend event listeners. if(touchAvailable){ canvas.addEventListener('touchstart', draw, false); canvas.addEventListener('touchmove', draw, false); canvas.addEventListener('touchend', draw, false); } // attach the mousedown, mousemove, mouseup event listeners. else { canvas.addEventListener('mousedown', draw, false); canvas.addEventListener('mousemove', draw, false); canvas.addEventListener('mouseup', draw, false); } // prevent elastic scrolling document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); // end body.onTouchMove }, false); // end window.onLoad
+5
source

Source: https://habr.com/ru/post/1481563/

More articles:


All Articles