javascript - 如何获取鼠标单击画布元素的坐标？

Question

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

无需兼容旧版浏览器，Safari、Opera 和 Firefox 即可。

score 251 · Accepted Answer

如果您喜欢简单但仍需要跨浏览器功能，我发现此解决方案最适合我。这是@Aldekein 解决方案的简化，但没有 jQuery。

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect()
    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)
})

score 180 · Accepted Answer

更新（2016 年 5 月 5 日）：应该改用 patriques 的答案，因为它更简单、更可靠。

由于画布的样式并不总是相对于整个页面，因此canvas.offsetLeft/Top并不总是返回您需要的内容。它将返回相对于它的 offsetParent 元素偏移的像素数，它可以类似于包含应用了样式div的画布的元素。position: relative考虑到这一点，您需要offsetParent从画布元素本身开始循环遍历 s 链。这段代码非常适合我，在 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;

score 84 · Accepted Answer

编辑 2018：这个答案已经很老了，它对不再需要的旧浏览器进行检查，因为clientXandclientY属性在所有当前浏览器中都有效。您可能想查看Patriques Answer以获得更简单、更新的解决方案。

原始答案：
正如我当时发现但不再存在的文章中所述：

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;

对我来说工作得很好。

score 39 · Accepted Answer

现代浏览器现在为您处理这个问题。Chrome、IE9 和 Firefox 像这样支持 offsetX/Y，从点击处理程序中传入事件。

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

大多数现代浏览器也支持 layerX/Y，但是 Chrome 和 IE 使用 layerX/Y 作为页面点击的绝对偏移量，包括边距、填充等。在 Firefox 中，layerX/Y 和 offsetX/Y 是等价的，但偏移量没有'以前不存在。因此，为了与稍旧的浏览器兼容，您可以使用：

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

score 19 · Accepted Answer

根据新鲜的Quirksmode所有主要浏览器都支持clientX和方法。clientY所以，这里是 - 在带有滚动条的页面上的滚动 div 中工作的良好、有效的代码：

function getCursorPosition(canvas, event) {
var x, y;

canoffset = $(canvas).offset();
x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;

return [x,y];
}

这也需要jQuery用于$(canvas).offset().

score 13 · Accepted Answer

我做了一个完整的演示，可以在每个浏览器中使用这个问题的解决方案的完整源代码：Coordinates of a mouse click on Canvas in Javascript。要尝试演示，请复制代码并将其粘贴到文本编辑器中。然后将其保存为 example.html，最后用浏览器打开该文件。

score 13 · Accepted Answer

因此，这既简单又比看起来要复杂一些。

首先这里通常有混淆的问题

如何获取元素相对鼠标坐标
如何获取 2D Canvas API 或 WebGL 的画布像素鼠标坐标

所以，答案

如何获取元素相对鼠标坐标

元素是否是获取元素相对鼠标坐标的画布对于所有元素都是相同的。

“如何获取画布相对鼠标坐标”的问题有 2 个简单的答案

简单的答案#1 使用`offsetX`和`offsetY`

canvas.addEventListner('mousemove', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;
});

这个答案适用于 Chrome、Firefox 和 Safari。与所有其他事件值不同offsetX，offsetY将 CSS 转换考虑在内。

最大的问题是截至 2019/05 offsetX，offsetY它们在触摸事件中不存在，因此不能与 iOS Safari 一起使用。它们确实存在于指针事件中，这些事件存在于 Chrome 和 Firefox 中，但不存在于 Safari 中，尽管显然 Safari 正在处理它。

另一个问题是事件必须在画布上。如果您将它们放在其他元素或窗口上，您以后不能选择画布作为您的参考点。

简单答案 #2 使用`clientX`,`clientY`和`canvas.getBoundingClientRect`

如果您不关心 CSS 转换，那么下一个最简单的答案是调用并从和中canvas. getBoundingClientRect()减去左clientXtopclientY

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
});

只要没有 CSS 转换，这将起作用。它也适用于触摸事件，因此适用于 Safari iOS

canvas.addEventListener('touchmove', (e) => {
  const rect = canvas. getBoundingClientRect();
  const x = e.touches[0].clientX - rect.left;
  const y = e.touches[0].clientY - rect.top;
});

如何获取 2D Canvas API 的画布像素鼠标坐标

为此，我们需要获取上面得到的值，并将画布显示的大小转换为画布本身的像素数

和和canvas.getBoundingClientRect_clientXclientY

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const elementRelativeX = e.clientX - rect.left;
  const elementRelativeY = e.clientY - rect.top;
  const canvasRelativeX = elementRelativeX * canvas.width / rect.width;
  const canvasRelativeY = elementRelativeY * canvas.height / rect.height;
});

或与offsetX和offsetY

canvas.addEventListener('mousemove', (e) => {
  const elementRelativeX = e.offsetX;
  const elementRelativeY = e.offsetY;
  const canvasRelativeX = elementRelativeX * canvas.width / canvas.clientWidth;
  const canvasRelativeY = elementRelativeY * canvas.height / canvas.clientHeight;
});

注意：在所有情况下都不要在画布上添加填充或边框。这样做会使代码变得非常复杂。而不是您想要在其他元素中围绕画布的边框或填充，并将填充和/或边框添加到外部元素。

使用的工作示例event.offsetX，event.offsetY

[...document.querySelectorAll('canvas')].forEach((canvas) => {
  const ctx = canvas.getContext('2d');
  ctx.canvas.width  = ctx.canvas.clientWidth;
  ctx.canvas.height = ctx.canvas.clientHeight;
  let count = 0;

  function draw(e, radius = 1) {
    const pos = {
      x: e.offsetX * canvas.width  / canvas.clientWidth,
      y: e.offsetY * canvas.height / canvas.clientHeight,
    };
    document.querySelector('#debug').textContent = count;
    ctx.beginPath();
    ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
    ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
    ctx.fill();
  }

  function preventDefault(e) {
    e.preventDefault();
  }

  if (window.PointerEvent) {
    canvas.addEventListener('pointermove', (e) => {
      draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
    });
    canvas.addEventListener('touchstart', preventDefault, {passive: false});
    canvas.addEventListener('touchmove', preventDefault, {passive: false});
  } else {
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mousedown', preventDefault);
  }
});

function hsl(h, s, l) {
  return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation-duration: 16s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from { transform: translateZ(-100px) rotateX(  0deg) rotateY(  0deg); }
  to   { transform: translateZ(-100px) rotateX(360deg) rotateY(720deg); }
}

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: block;
}

.cube__face--front  { background: rgba(255, 0, 0, 0.2); transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { background: rgba(0, 255, 0, 0.2); transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back   { background: rgba(0, 0, 255, 0.2); transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { background: rgba(255, 255, 0, 0.2); transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { background: rgba(0, 255, 255, 0.2); transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { background: rgba(255, 0, 255, 0.2); transform: rotateX(-90deg) translateZ(100px); }

<div class="scene">
  <div class="cube">
    <canvas class="cube__face cube__face--front"></canvas>
    <canvas class="cube__face cube__face--back"></canvas>
    <canvas class="cube__face cube__face--right"></canvas>
    <canvas class="cube__face cube__face--left"></canvas>
    <canvas class="cube__face cube__face--top"></canvas>
    <canvas class="cube__face cube__face--bottom"></canvas>
  </div>
</div>
<pre id="debug"></pre>

canvas.getBoundingClientRect使用and event.clientXand 的工作示例event.clientY

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas.width  = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight;
let count = 0;

function draw(e, radius = 1) {
  const rect = canvas.getBoundingClientRect();
  const pos = {
    x: (e.clientX - rect.left) * canvas.width  / canvas.clientWidth,
    y: (e.clientY - rect.top) * canvas.height / canvas.clientHeight,
  };
  ctx.beginPath();
  ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
  ctx.fillStyle = hsl((count++ % 100) / 100, 1, 0.5);
  ctx.fill();
}

function preventDefault(e) {
  e.preventDefault();
}

if (window.PointerEvent) {
  canvas.addEventListener('pointermove', (e) => {
    draw(e, Math.max(Math.max(e.width, e.height) / 2, 1));
  });
  canvas.addEventListener('touchstart', preventDefault, {passive: false});
  canvas.addEventListener('touchmove', preventDefault, {passive: false});
} else {
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mousedown', preventDefault);
}

function hsl(h, s, l) {
  return `hsl(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%)`;
}

canvas { background: #FED; }

<canvas width="400" height="100" style="width: 300px; height: 200px"></canvas>
<div>canvas deliberately has differnt CSS size vs drawingbuffer size</div>

score 12 · Accepted Answer

这是Ryan Artecona对宽度可变 (%) 的画布的回答的一个小修改：

 HTMLCanvasElement.prototype.relMouseCoords = function (event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft;
        totalOffsetY += currentElement.offsetTop;
    }
    while (currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    // Fix for variable canvas width
    canvasX = Math.round( canvasX * (this.width / this.offsetWidth) );
    canvasY = Math.round( canvasY * (this.height / this.offsetHeight) );

    return {x:canvasX, y:canvasY}
}

score 7 · Accepted Answer

进行坐标转换时要小心；点击事件中返回多个非跨浏览器值。如果浏览器窗口滚动（在 Firefox 3.5 和 Chrome 3.0 中验证），则单独使用 clientX 和 clientY 是不够的。

这篇 quirks mode文章提供了一个更正确的函数，可以使用 pageX 或 pageY 或 clientX 与 document.body.scrollLeft 和 clientY 与 document.body.scrollTop 的组合来计算相对于文档原点的点击坐标。

更新：此外， offsetLeft 和 offsetTop 是相对于元素的填充大小，而不是内部大小。应用了 padding: 样式的画布不会将其内容区域的左上角报告为 offsetLeft。这个问题有多种解决方案；最简单的一种可能是清除画布本身上的所有边框、填充等样式，而是将它们应用于包含画布的框。

score 7 · Accepted Answer

我不确定所有这些通过父元素循环并做各种奇怪事情的答案的意义何在。

该HTMLElement.getBoundingClientRect方法旨在处理任何元素的实际屏幕位置。scrollTop这包括滚动，所以不需要类似的东西：

（来自 MDN）在计算边界矩形时会考虑视口区域（或 任何其他可滚动元素）的滚动量

正常图像

这里已经发布了最简单的方法。只要不涉及狂野的 CSS规则，这是正确的。

处理拉伸的画布/图像

当图像像素宽度与其 CSS 宽度不匹配时，您需要对像素值应用一些比率：

/* Returns pixel coordinates according to the pixel that's under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();
  var top = rect.top;
  var bottom = rect.bottom;
  var left = rect.left;
  var right = rect.right;
  //Recalculate mouse offsets to relative offsets
  x = event.clientX - left;
  y = event.clientY - top;
  //Also recalculate offsets of canvas is stretched
  var width = right - left;
  //I use this to reduce number of calculations for images that have normal size 
  if(this.width!=width) {
    var height = bottom - top;
    //changes coordinates by ratio
    x = x*(this.width/width);
    y = y*(this.height/height);
  } 
  //Return as an array
  return [x,y];
}

只要画布没有边框，它就适用于拉伸图像（jsFiddle）。

处理 CSS 边框

如果画布有粗边框，事情就变得有点复杂了。您实际上需要从边界矩形中减去边框。这可以使用.getComputedStyle来完成。这个答案描述了这个过程。

然后函数长大一点：

/* Returns pixel coordinates according to the pixel that's under the mouse cursor**/
HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();
  var top = rect.top;
  var bottom = rect.bottom;
  var left = rect.left;
  var right = rect.right;
  //Subtract border size
  // Get computed style
  var styling=getComputedStyle(this,null);
  // Turn the border widths in integers
  var topBorder=parseInt(styling.getPropertyValue('border-top-width'),10);
  var rightBorder=parseInt(styling.getPropertyValue('border-right-width'),10);
  var bottomBorder=parseInt(styling.getPropertyValue('border-bottom-width'),10);
  var leftBorder=parseInt(styling.getPropertyValue('border-left-width'),10);
  //Subtract border from rectangle
  left+=leftBorder;
  right-=rightBorder;
  top+=topBorder;
  bottom-=bottomBorder;
  //Proceed as usual
  ...
}

我想不出任何会混淆这个最终功能的东西。在JsFiddle看到自己。

笔记

如果您不喜欢修改原生prototypes，只需更改函数并调用它(canvas, event)（并将任何替换this为canvas）。

score 6 · Accepted Answer

这是一个非常好的教程-

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

 <canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
  }
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
  }, false);

希望这可以帮助！

score 3 · Accepted Answer

在 2016 年使用 jQuery 来获取相对于画布的点击坐标，我这样做：

$(canvas).click(function(jqEvent) {
    var coords = {
        x: jqEvent.pageX - $(canvas).offset().left,
        y: jqEvent.pageY - $(canvas).offset().top
    };
});

这是因为 canvas offset() 和 jqEvent.pageX/Y 都是相对于文档的，无论滚动位置如何。

请注意，如果您的画布被缩放，那么这些坐标与画布逻辑坐标不同。要获得这些，您还可以执行以下操作：

var logicalCoords = {
    x: coords.x * (canvas.width / $(canvas).width()),
    y: coords.y * (canvas.height / $(canvas).height())
}

score 2 · Accepted Answer

我推荐这个链接- http://miloq.blogspot.in/2011/05/coordinates-mouse-click-canvas.html

<style type="text/css">

  #canvas{background-color: #000;}

</style>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", init, false);

  function init()
  {
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", getPosition, false);
  }

  function getPosition(event)
  {
    var x = new Number();
    var y = new Number();
    var canvas = document.getElementById("canvas");

    if (event.x != undefined && event.y != undefined)
    {
      x = event.x;
      y = event.y;
    }
    else // Firefox method to get the position
    {
      x = event.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
    }

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

    alert("x: " + x + "  y: " + y);
  }

</script>

score 1 · Accepted Answer

在 Prototype 中，使用累积偏移（）进行递归求和，如上面 Ryan Artecona 所述。

http://www.prototypejs.org/api/element/cumulativeoffset

score 1 · Accepted Answer

你可以这样做：

var canvas = yourCanvasElement;
var mouseX = (event.clientX - (canvas.offsetLeft - canvas.scrollLeft)) - 2;
var mouseY = (event.clientY - (canvas.offsetTop - canvas.scrollTop)) - 2;

这将为您提供鼠标指针的确切位置。

score 1 · Accepted Answer

请参阅http://jsbin.com/ApuJOSA/1/edit?html,output上的演示。

  function mousePositionOnCanvas(e) {
      var el=e.target, c=el;
      var scaleX = c.width/c.offsetWidth || 1;
      var scaleY = c.height/c.offsetHeight || 1;

      if (!isNaN(e.offsetX)) 
          return { x:e.offsetX*scaleX, y:e.offsetY*scaleY };

      var x=e.pageX, y=e.pageY;
      do {
        x -= el.offsetLeft;
        y -= el.offsetTop;
        el = el.offsetParent;
      } while (el);
      return { x: x*scaleX, y: y*scaleY };
  }

score 1 · Accepted Answer

我正在创建一个在 pdf 上具有画布的应用程序，这涉及到很多画布的大小调整，例如放大和缩小 pdf，然后每次放大/缩小 PDF 我必须调整画布大小以适应pdf 的大小，我在 stackOverflow 中查看了很多答案，但没有找到最终解决问题的完美解决方案。

我使用的是rxjs和 angular 6，但没有找到任何特定于最新版本的答案。

这是对任何利用rxjs在画布上绘图的人都有帮助的完整代码片段。

  private captureEvents(canvasEl: HTMLCanvasElement) {

    this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
      .pipe(
        switchMap((e: any) => {

          return fromEvent(canvasEl, 'mousemove')
            .pipe(
              takeUntil(fromEvent(canvasEl, 'mouseup').do((event: WheelEvent) => {
                const prevPos = {
                  x: null,
                  y: null
                };
              })),

              takeUntil(fromEvent(canvasEl, 'mouseleave')),
              pairwise()
            )
        })
      )
      .subscribe((res: [MouseEvent, MouseEvent]) => {
        const rect = this.cx.canvas.getBoundingClientRect();
        const prevPos = {
          x: Math.floor( ( res[0].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
          y:  Math.floor( ( res[0].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
        };
        const currentPos = {
          x: Math.floor( ( res[1].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
          y: Math.floor( ( res[1].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
        };

        this.coordinatesArray[this.file.current_slide - 1].push(prevPos);
        this.drawOnCanvas(prevPos, currentPos);
      });
  }

这是修复的片段，鼠标坐标相对于画布的大小，无论您如何放大/缩小画布。

const prevPos = {
  x: Math.floor( ( res[0].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
  y:  Math.floor( ( res[0].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
};
const currentPos = {
  x: Math.floor( ( res[1].clientX - rect.left ) / ( rect.right - rect.left ) * this.cx.canvas.width ),
  y: Math.floor( ( res[1].clientY - rect.top ) / ( rect.bottom - rect.top ) * this.cx.canvas.height )
};

score 0 · Accepted Answer

这是上述 Ryan Artecona 解决方案的一些修改。

function myGetPxStyle(e,p)
{
    var r=window.getComputedStyle?window.getComputedStyle(e,null)[p]:"";
    return parseFloat(r);
}

function myGetClick=function(ev)
{
    // {x:ev.layerX,y:ev.layerY} doesn't work when zooming with mac chrome 27
    // {x:ev.clientX,y:ev.clientY} not supported by mac firefox 21
    // document.body.scrollLeft and document.body.scrollTop seem required when scrolling on iPad
    // html is not an offsetParent of body but can have non null offsetX or offsetY (case of wordpress 3.5.1 admin pages for instance)
    // html.offsetX and html.offsetY don't work with mac firefox 21

    var offsetX=0,offsetY=0,e=this,x,y;
    var htmls=document.getElementsByTagName("html"),html=(htmls?htmls[0]:0);

    do
    {
        offsetX+=e.offsetLeft-e.scrollLeft;
        offsetY+=e.offsetTop-e.scrollTop;
    } while (e=e.offsetParent);

    if (html)
    {
        offsetX+=myGetPxStyle(html,"marginLeft");
        offsetY+=myGetPxStyle(html,"marginTop");
    }

    x=ev.pageX-offsetX-document.body.scrollLeft;
    y=ev.pageY-offsetY-document.body.scrollTop;
    return {x:x,y:y};
}

score 0 · Accepted Answer

首先，正如其他人所说，您需要一个函数来获取canvas 元素的位置。这是一种比此页面上的其他一些方法更优雅的方法（恕我直言）。您可以将任何元素传递给它并获取它在文档中的位置：

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

现在计算光标相对于它的当前位置：

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

请注意，我已将通用findPos函数与事件处理代码分开。（应该是这样。我们应该尽量让我们的功能各自完成一项任务。）

offsetLeft和的值offsetTop是相对于的offsetParent，它可能是一些包装div节点（或其他任何东西，就此而言）。当没有包裹canvas它们的元素时，它们是相对于的body，所以没有要减去的偏移量。这就是为什么我们需要在做其他事情之前确定画布的位置。

同样，e.pageX并e.pageY给出光标相对于文档的位置。这就是为什么我们从这些值中减去画布的偏移量以到达真实位置。

定位元素的替代方法是直接使用和的e.layerX值e.layerY。这比上述方法更不可靠，原因有两个：

当事件不在定位元素内发生时，这些值也相对于整个文档
它们不是任何标准的一部分

score 0 · Accepted Answer

ThreeJS r77

var x = event.offsetX == undefined ? event.layerX : event.offsetX;
var y = event.offsetY == undefined ? event.layerY : event.offsetY;

mouse2D.x = ( x / renderer.domElement.width ) * 2 - 1;
mouse2D.y = - ( y / renderer.domElement.height ) * 2 + 1;

在尝试了许多解决方案之后。这对我有用。可能会帮助其他人因此发布。从这里得到

score 0 · Accepted Answer

这是一个简化的解决方案（这不适用于边框/滚动）：

function click(event) {
    const bound = event.target.getBoundingClientRect();

    const xMult = bound.width / can.width;
    const yMult = bound.height / can.height;

    return {
        x: Math.floor(event.offsetX / xMult),
        y: Math.floor(event.offsetY / yMult),
    };
}

score -1 · Accepted Answer

嘿，这是在道场中，只是因为这是我已经为项目准备的代码。

如何将其转换回非 dojo vanilla JavaScript 应该是相当明显的。

  function onMouseClick(e) {
      var x = e.clientX;
      var y = e.clientY;
  }
  var canvas = dojo.byId(canvasId);
  dojo.connect(canvas,"click",onMouseClick);

希望有帮助。

javascript - 如何获取鼠标单击画布元素的坐标？

22 回答 22

如何获取元素相对鼠标坐标

简单的答案#1 使用offsetX和offsetY

简单答案 #2 使用clientX,clientY和canvas.getBoundingClientRect