How can I turn these jQuery mouse events to touch events (for iPad) -
i have created jquery scratch ticket works in way user can left-click+hold , move cursor scratch top image off see image underneath. works fine mouse events. want able use on ipad (touch events). how modify it?
var topimage = new image(); var bottomimage = new image(); var coinimage = new image(); bottomimage.src = "images/question.png"; coinimage.src = "images/coin.png"; function init() { var ismousedown = false; var canvaswidth = $('#canvas').width(); var canvasheight = $('#canvas').height(); $('body').append('<canvas id="overlay" width="'+canvaswidth+'" height="'+canvasheight+'" />'); // create coin overlay canvas var overlayctx = $('canvas')[1].getcontext('2d'); overlayctx.drawimage(coinimage, 0,0); function scratchoff(x, y) { mainctx.save(); mainctx.beginpath(); mainctx.arc(x,y,radius,0,math.pi*2,false); // don't fill or stroke arc intentionally mainctx.clip(); mainctx.drawimage(bottomimage, 0, 0); mainctx.restore(); } $('#overlay').mousedown(function(e){ ismousedown = true; var relx = e.pagex - this.offsetleft; var rely = e.pagey - this.offsettop; scratchoff(relx, rely, true); }); $('#overlay').mousemove(function(e){ var relx = e.pagex - this.offsetleft; var rely = e.pagey - this.offsettop; overlayctx.clearrect(0,0,canvaswidth,canvasheight); overlayctx.drawimage(coinimage, relx-radius, rely-radius); if (ismousedown) scratchoff(relx, rely, false); }); $('#overlay').mouseup(function(e){ ismousedown = false; }); var mainctx = $('canvas')[0].getcontext('2d'); var radius = 20; topimage.onload = function(){ mainctx.drawimage(topimage, 0, 0); }; topimage.src = "images/skava.png"; }
change following event names:
mousedown -> touchstart
mouseup -> touchend
for 'wipe' (left right or right left) gestures i'd recommend using: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
hope helps
Comments
Post a Comment