javascript - How can I get this HTML5 Canvas paint application to work for both touch and mouse events? -
here source code of i'm trying do:
javascript:
window.addeventlistener('load', function () { // canvas element , context var canvas = document.getelementbyid('sketchpad'); var context = canvas.getcontext('2d'); // create drawer 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 function pass touch events , coordinates drawer function draw(event) { // touch coordinates var coors = { x: event.targettouches[0].pagex, y: event.targettouches[0].pagey }; // pass coordinates appropriate handler drawer[event.type](coors); } // attach 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, browser 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 mouse down/up/move didn't seem work.
alternatively, if has suggestions open source canvas painting apps work on computer , tablet i'd rather use that.
so far 1 has stood out https://github.com/playmycode/skybrush unfortunately doesn't work on android tablets (at least ones i've been able try).
check modified fiddle
i added way detect when running in touch device , switch map mouse events touch events.
also notice when touchend occurred need use event.changedtouches coors correctly.
window.addeventlistener('load', function () { // canvas element , context var canvas = document.getelementbyid('sketchpad'); var context = canvas.getcontext('2d'); // create drawer 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 function pass touch events , coordinates drawer function draw(event) { var type = null; // map mouse events 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 touches[0], need use changedtouches[0] var coors; if(event.type === "touchend") { coors = { x: event.changedtouches[0].pagex, y: event.changedtouches[0].pagey }; } else { // touch coordinates coors = { x: event.touches[0].pagex, y: event.touches[0].pagey }; } type = type || event.type // pass coordinates appropriate handler drawer[type](coors); } // detect touch capabilities var touchavailable = ('createtouch' in document) || ('ontouchstart' in window); // attach touchstart, touchmove, touchend event listeners. if(touchavailable){ canvas.addeventlistener('touchstart', draw, false); canvas.addeventlistener('touchmove', draw, false); canvas.addeventlistener('touchend', draw, false); } // attach 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
Comments
Post a Comment