如何获取鼠标单击画布元素的坐标 (mouse click)

将单击事件处理程序添加到 canvas 元素的最简单方法是返回单击的 x 和 y 坐标(相对于 canvas 元素)?

将单击事件处理程序添加到 canvas 元素的最简单方法是返回单击的 x 和 y 坐标(相对于 canvas 元素)?

不需要传统的浏览器兼容性,Safari,Opera 和 Firefox 都可以。

266

如果你喜欢简单但仍然想要跨浏览器功能,我发现这个解决方案最适合我。这是 @ Aldekein 解决方案的简化,但没有 jQuery

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    console.log("x: " + x + " y: " + y)
}
const canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e)
})
181

更新(5 / 5 / 16):应改用patriques' answer,因为它既更简单又更可靠。

由于画布并不总是相对于整个页面进行样式设置,因此canvas.offsetLeft/Top并不总是返回所需的内容。它将返回相对于其 offsetParent 元素偏移的像素数,该元素可以类似于div元素,其中包含应用了position: relative样式的画布。为了解决这个问题,您需要在 Firefox 中对所有offsetParentcan

function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;
    do{
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent)
    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

最后一行使获取鼠标相对于 canvas 元素的坐标变得很方便。获取有用坐标所需的只是

coords = canvas.relMouseCoords(event);
canvasX = coords.x;
canvasY = coords.y;
83

编辑 2018:这个答案很老,它使用检查旧的浏览器,不再需要,因为clientXclientY属性在所有当前浏览器中工作。

原始答案:
如我当时发现的一篇文章中所述,但不再存在:

var x;
var y;
if (e.pageX || e.pageY) { 
  x = e.pageX;
  y = e.pageY;
}
else { 
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;

对我来说很好。

40

Chrome,IE9 和 Firefox 支持这样的 offsetX / Y,从点击处理程序传递事件。

function getRelativeCoords(event) {
    return { x: event.offsetX, y: event.offsetY };
}

大多数现代浏览器也支持 layerX / Y,但是 Chrome 和 IE 使用 layerX / Y 作为页面上点击的绝对偏移量,包括 margin,padding 等。在 Firefox 中,layerX / Y 和 offsetX / Y 是等效的,但偏移量以前不存在。因此,为了与稍旧的浏览器兼容,您可以使用:

function getRelativeCoords(event) {
    return { x: event.offsetX || event.layerX, y: event.offsetY || event.layerY };
}

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(836)
在PostgreSQL中使用UTC中的当前时间作为默认值
上一篇
在给定范围内查找函数的根(root of the function)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(4条)