jan*_*nce 5 javascript css html5 canvas javascript-events
关于如何在Canvas元素上获取事件的坐标(相对于Canvas本身),这里有很多答案,在stackoverflow上.我使用以下解决方案(getEventPosition)并且它运行良好,除了我向画布添加边框时:
/**** This solution gives me an offset equal to the border size
**** when the canvas has a border. Example:
**** <canvas style='border: 10px solid black; background: #333;' id='gauge_canvas' width='500' height='500'></canvas>
****/
// Get DOM element position on page
this.getPosition = function(obj) {
var x = 0, y = 0;
if (obj.offsetParent) {
do {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
} while (obj);
}
return {'x': x, 'y': y};
};
// Get mouse event position in DOM element (don't know how to use scale yet).
this.getEventPosition = function(e, obj, aux_e, scale) {
var evt, docX, docY, pos;
evt = (e ? e : window.event);
if (evt.pageX || evt.pageY) {
docX = evt.pageX;
docY = evt.pageY;
} else if (evt.clientX || evt.clientY) {
docX = evt.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
docY = evt.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
// This works on hammer.js
else if (typeof aux_e !== 'undefined') {
docX = aux_e.touches[0].x;
docY = aux_e.touches[0].y;
}
pos = this.getPosition(obj);
if (typeof scale === 'undefined') {
scale = 1;
}
return {'x': (docX - pos.x) / scale, 'y': (docY - pos.y) / scale};
};
由于此代码属于我的库,并且可以采用用户提供的任何canvas元素,因此当用户为库提供带边框的画布时,事情会中断.是否存在考虑边界的解决方案？
这是我最近的实验所使用的。
http://jsfiddle.net/simonsarris/te8GQ/5/
var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(can, undefined)['paddingLeft'], 10) || 0;
var stylePaddingTop = parseInt(document.defaultView.getComputedStyle(can, undefined)['paddingTop'], 10) || 0;
var styleBorderLeft = parseInt(document.defaultView.getComputedStyle(can, undefined)['borderLeftWidth'], 10) || 0;
var styleBorderTop = parseInt(document.defaultView.getComputedStyle(can, undefined)['borderTopWidth'], 10) || 0;
var html = document.body.parentNode;
var htmlTop = html.offsetTop;
var htmlLeft = html.offsetLeft;
function getMouse(e) {
var element = can,
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;
// We return a simple javascript object (a hash) with x and y defined
return {
x: mx,
y: my
};
}
它适用于任何边框和填充，也适用于在偏移 HTML 的对象中填充的页面（如 stumbleupon 栏）。如果浏览器缩放，它也可以工作。
它似乎在触摸设备上也能正常工作。