canvas - 我们如何从 onClick 事件中获取鼠标画布的相对 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);
    }

我已经测试过，但它没有计算出画布中正确的鼠标位置。

Answer 1

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

更新：请注意，坏外星人将原点放置在画布的中心。也许你想把它留在左上角？如果是这样，那么不要减去画布尺寸的一半：

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