javascript - Multitouch in HTML5 Canvas / DOM for AngularJS -

javascript - Multitouch in HTML5 Canvas / DOM for AngularJS -

i started creating little remote command app using angular. created joystick directive using canvas.

i wrapped in angular directive , works quite nice. can see illustration here (note: touch, no mouse events yet):

http://jsfiddle.net/wje2b/3/

what want command auto basicall means maintain joystick dragged time , additionally want command button e.g. horn. prefer using simple button here.

but handlers ng-click stop working if drag joystick around. can hear other touch events (e.g. add together joystick, works independently) on canvas , of course of study other canvas, can hear other events touch somehow? how accomplish angular / simplest way?

here code fiddle:

angular.module('myapp').directive('joystick', function() { function joystickcontroller ($scope) { } homecoming { restrict : 'e', controller : ['$scope', function ($scope) { homecoming joystickcontroller($scope); }], scope : { // using primitives here did not work, utilize object, see: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs position : '=' }, template : '<canvas class="joystickcanvas"></canvas>', link : function(scope, element) { var joystickheight = 200; var joystickwidth = 200; var center = { x : joystickheight / 2, y : joystickwidth / 2 }; var radiuscircle = 35; var radiusbound = 50; // canvas , context element var container = element[0]; var canvas = container.children[0]; var ctx = canvas.getcontext('2d'); // id of touch on cursor var cursortouchid = -1; var cursortouch = { x : center.x, y : center.y }; function resetcanvas() { canvas.height = joystickheight; canvas.width = joystickwidth; } function ontouchstart(event) { var touch = event.targettouches[0]; cursortouchid = touch.identifier; cursortouch = { x : touch.pagex - touch.target.offsetleft, y : touch.pagey - touch.target.offsettop }; } function ontouchmove(event) { // prevent browser doing default thing (scroll, zoom) event.preventdefault(); for(var = 0; < event.changedtouches.length; i++){ var touch = event.changedtouches[i]; if(cursortouchid === touch.identifier) { cursortouch = { x : touch.pagex - touch.target.offsetleft, y : touch.pagey - touch.target.offsettop }; var scalex = radiusbound / (cursortouch.x - center.x); var scaley = radiusbound / (cursortouch.y - center.y); if(math.abs(scalex) < 1) { cursortouch.x = math.abs(cursortouch.x - center.x) * scalex + center.x; } if (math.abs(scaley) < 1) { cursortouch.y = math.abs(cursortouch.y - center.y) * scaley + center.y; } scope.$apply( scope.position = { x : math.round(((cursortouch.x - center.x)/radiusbound) * 100), y : math.round(((cursortouch.y - center.y)/radiusbound) * -100) } ); break; } } } function ontouchend() { cursortouchid = -1; scope.$apply( scope.position = { x : 0, y : 0 } ); cursortouch.x = center.x; cursortouch.y = center.y; } function draw() { // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.beginpath(); ctx.strokestyle = 'cyan'; ctx.linewidth = 5; ctx.arc(center.x, center.y, radiuscircle, 0, math.pi*2, true); ctx.stroke(); ctx.beginpath(); ctx.strokestyle = 'cyan'; ctx.linewidth = 2; ctx.arc(center.x, center.y, radiusbound, 0, math.pi*2, true); ctx.stroke(); ctx.beginpath(); ctx.strokestyle = 'cyan'; ctx.linewidth = 2; ctx.arc(cursortouch.x, cursortouch.y, radiuscircle, 0, math.pi*2, true); ctx.stroke(); requestanimframe(draw); } // check if touch enabled var touchable = true; if(touchable) { canvas.addeventlistener( 'touchstart', ontouchstart, false ); canvas.addeventlistener( 'touchmove', ontouchmove, false ); canvas.addeventlistener( 'touchend', ontouchend, false ); window.onorientationchange = resetcanvas; window.onresize = resetcanvas; } // bind values outside scope.$watch('position', function(newval) { cursortouch = { x : ((newval.x * radiusbound) / 100) + center.x, y : ((newval.y * radiusbound) / -100) + center.y }; }); resetcanvas(); draw(); } }; });

javascript html5 angularjs canvas multi-touch