如何获得鼠标单击画布元素的坐标?

如何获得鼠标单击画布元素的坐标?

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

不需要传统浏览器兼容性,Safari、Opera和Firefox就行了。


白衣染霜花
浏览 910回答 3
3回答

慕虎7371278

正如我在当时发现的一篇文章中所描述的,但现在已经不存在了: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;对我来说很好。

饮歌长啸

由于画布的样式并不总是相对于整个页面的样式,所以canvas.offsetLeft/Top并不总是把你需要的东西还回去。它将返回相对于其offsetParent元素偏移的像素数,该元素可以类似于div元素,其中包含带有position: relative风格适用。要解释这一点,您需要遍历offsetParents,从画布元素本身开始。这段代码在Firefox和Safari中测试过,非常适合我,但应该适用于所有人。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;最后一行为获取相对于画布元素的鼠标坐标提供了方便。得到有用的坐标所需要的就是coords = canvas.relMouseCoords(event);canvasX = coords.x;canvasY = coords.y;
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript