如何获取鼠标单击画布元素的坐标 (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 };
}

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

(616)
循环遍历字符串数组并将其呈现为React中组件中的Prop
上一篇
GoogleMapsAPI|当外面很黑(与时间有关)时 如何更改地图样式(复古为夜间模式)
下一篇

相关推荐

  • type c接口是啥改变你的充电体验

    示例示例Type C接口是一种新型的USB连接器,它可以支持更高的数据传输速度,比传统的USB 0接口更快。与传统的USB接口不同,Type C接口可以在两端都使用,无需额外的翻转,使连接更加方便快捷。下面是一个使用Type C接口的代码示例:…

    2023-01-12 02:06:09
    0 40 37
  • carwings是什么意思智能汽车连接系统的未来

    Carwings是日产汽车公司推出的一款远程智能汽车服务,它可以帮助用户远程监控汽车的状态和行驶信息,并且可以远程控制汽车的功能。…

    2023-01-19 13:55:38
    0 71 64
  • cvt变速箱油分几种:CVT变速箱油的种类及用法

    cvt变速箱油一般分为三种,分别是:传统cvt变速箱油:代码:CVT-1…

    2023-01-27 12:23:25
    0 22 49
  • contextcapture集群:如何使用ContextCapture技术构建高效的3D集群

    ContextCapture集群是一种分布式的技术,它可以让多台服务器共享数据,从而提高应用程序的性能和可靠性。它可以使用多台服务器来收集、存储和处理数据,而不需要单独的服务器来执行这些任务。…

    2023-01-05 08:03:52
    0 70 63
  • code128条码字体下载:使用 Code128 条码字体创建条码标识

    code128条码字体下载是指下载code128条码字体的过程。Code128条码字体是一种用于生成Code128条形码的字体。它可以将文本转换为条形码,并将条形码打印在各种类型的媒体上。要下载code128条码字体,可以从网上搜索“code128条码字体下载”,然后选择一个可靠的网站下载。一旦下载完成,就可以使用该字体创建code128条形码。…

    2023-01-19 14:44:33
    0 71 66
  • txvlog com糖心改变你的生活,让你的心情更加甜蜜!

    txvlog com糖心是一款以视频分享为主的社交APP,可以让用户上传自己的视频,并与其他用户进行互动。它的主要功能有:用户注册:用户可以通过手机号码、邮箱地址或者社交媒体账号注册,并设置自己的个人信息;…

    2023-01-10 05:08:15
    0 17 50
  • chigo空调遥控器操作老式:如何使用Chigo空调遥控器操作老式空调

    Chigo空调遥控器操作老式,主要有以下几步:首先准备好Chigo空调遥控器,打开电源,将遥控器与空调连接;…

    2023-01-23 01:53:07
    0 60 97
  • cvte在线测评:如何利用CVTE在线测评提升职业能力?

    cvte在线测评是一款在线编程测评系统,它可以帮助用户快速、准确地评估学生的编程能力。它支持多种编程语言,并且提供了完善的测试环境,可以有效地检测出学生编程中的错误,同时还可以提供可视化的报告,帮助用户更好地理解学生的编程能力。…

    2023-01-27 15:11:58
    0 94 77

发表评论

登录 后才能评论

评论列表(42条)