javascript - Incorrect Touch Event Offsets for Scrolled Page in iOS and Android -
we have web page contains few div/canvas tags allowing user draw:
<div id="drawing" class="formfield" style="position: absolute; top: 444px; left: 121px; width: 302px; height: 185px; font-size: 10pt;"> <canvas id="drawingcanvas" class="inkformfield" width="302" height="185" style=""></canvas> </div> <div id="picture" class="formfield" style="position: absolute; top: 915px; left: 121px; width: 302px; height: 167px; font-size: 10pt;"> <canvas id="picturecanvas" class="inkformfield" width="302" height="167" style=""></canvas> </div> the second div/canvas (with top: 915px) not visible can scrolled , inked on.
the drawing pretty straight-forward code works correctly desktop browsers (using appropriate mouse events). ipad need use touch events determine point locations draw:
var touchx = e.changedtouches[0].screenx - canvasleft; var touchy = e.changedtouches[0].screeny - canvastop; (where canvasleft , canvastop page-relative offsets of canvas).
everything works correctly, after scrolling second div/canvas.
however, once outer added above code (with overflow: auto) touchx , touchy values no longer correct after div scrolled:
<div style="overflow: auto"> <div id="drawing" class="formfield" style="position: absolute; top: 444px; left: 121px; width: 302px; height: 185px; font-size: 10pt;"> <canvas id="drawingcanvas" class="inkformfield" width="302" height="185" style=""></canvas> </div> <div id="picture" class="formfield" style="position: absolute; top: 915px; left: 121px; width: 302px; height: 167px; font-size: 10pt;"> <canvas id="picturecanvas" class="inkformfield" width="302" height="167" style=""></canvas> </div> </div> as matter of fact seem off scrolled amount! according documentation, screeny property should take scrolling account (but maybe referring page scrolling, not outer div scrolling).
is there different property of touch event reports x , y offsets relative scrolled div points can drawn correctly?
alternatively, there a way keep track of amount of scrolling appropriate offset can applied computation of touchx , touchy?
here's mouse/touch code. give try. should work you:
with touch events can like:'
if (e.targettouches) e = e.targettouches[0]; before call it.
function getmouse(e, canvas) { var element = canvas, offsetx = 0, offsety = 0, mx, my; // compute total offset if (element.offsetparent !== undefined) { { offsetx += element.offsetleft; offsety += element.offsettop; } while ((element = element.offsetparent)); } // add padding , border style widths offset // add <html> offsets in case there's position:fixed bar offsetx += _stylepaddingleft + _styleborderleft + _htmlleft; offsety += _stylepaddingtop + _stylebordertop + _htmltop; mx = e.pagex - offsetx; = e.pagey - offsety; return {x: mx, y: my}; } those offsets following, assuming canvas called "canvas":
_stylepaddingleft = parseint(document.defaultview.getcomputedstyle(canvas, null)['paddingleft'], 10) || 0; _stylepaddingtop = parseint(document.defaultview.getcomputedstyle(canvas, null)['paddingtop'], 10) || 0; _styleborderleft = parseint(document.defaultview.getcomputedstyle(canvas, null)['borderleftwidth'], 10) || 0; _stylebordertop = parseint(document.defaultview.getcomputedstyle(canvas, null)['bordertopwidth'], 10) || 0; // <html> can have margin (typically seen position:fixed bars) var html = document.body.parentnode; _htmltop = html.offsettop; _htmlleft = html.offsetleft; 
Comments
Post a Comment