canvas - 我们如何从onClick事件中获取鼠标 Canvas 的相对x，y坐标？

Question

我从https://github.com/sethladd/bad-aliens-dart/blob/master/web/Game.dart找到了以下代码:

    ClientRect rect = ctx.canvas.getBoundingClientRect();
    clientBoundingRect = new GamePoint(rect.left, rect.top);
...
    GamePoint getXandY(e) {
      num x =  e.clientX - clientBoundingRect.x - (ctx.canvas.width/2);
      num y = e.clientY - clientBoundingRect.y - (ctx.canvas.height/2);
      return new GamePoint(x, y);
    }

我已经测试过，但无法计算出鼠标在 Canvas 中的正确位置。

Answer 1

CanvasElement.getBoundingRect()现在返回Rect而不是ClientRect。否则，该代码对我来说似乎可以正常工作。

更新:请注意，Bad Aliens将原点放置在Canvas的中心。也许您想将其留在左上方？如果是这样，请不要减去 Canvas 尺寸的一半:

GamePoint getXandY(e) {
  num x =  e.clientX - clientBoundingRect.x;
  num y = e.clientY - clientBoundingRect.y;
  return new GamePoint(x, y);
}