We have a web page that contains a few div/canvas tags allowing the user to 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) is initially not visible but can be scrolled to and inked on.
The drawing is pretty straight-forward code which works correctly for desktop browsers (using the appropriate mouse events). For the iPad we need to use touch events to determine the point locations to draw:
var touchX = e.changedTouches[0].screenX - canvasLeft;
var touchY = e.changedTouches[0].screenY - canvasTop;
(where canvasLeft and canvasTop are the page-relative offsets of the canvas).
Everything works correctly, even after scrolling to the second div/canvas.
However, once an outer is added to the above code (with overflow: auto ) the touchX and touchY values are no longer correct after the div is 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 a matter of fact they seem to be off by exactly the scrolled amount! According to the documentation, the screenY property should take scrolling into account (but maybe it is referring to the page scrolling, not the outer div scrolling).
Is there a different property of the touch event that reports the x and y offsets relative to the scrolled div so that points can be drawn correctly?
Alternatively, is there a way to keep track of the amount of scrolling so an appropriate offset can be applied to the computation of touchX and touchY?
Here's my mouse/touch code. Give it a try. It should work for you:
With touch events you can do something like:'
if (e.targetTouches) e = e.targetTouches[0];
before you call it.
function getMouse(e, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
offsetX += _stylePaddingLeft + _styleBorderLeft + _htmlLeft;
offsetY += _stylePaddingTop + _styleBorderTop + _htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {x: mx, y: my};
}
Those offsets are as following, assuming your canvas is 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 a margin (typically seen with position:fixed bars)
var html = document.body.parentNode;
_htmlTop = html.offsetTop;
_htmlLeft = html.offsetLeft;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.