如何在 Javascript canvas 游戏中将鼠标坐标转换为世界坐标？

Question

我正在使用 2d Canvas API 在 Javascript 中开发一个简单的自上而下的游戏。 目前，我让相机始终以播放器为中心，因此它们始终位于屏幕的中心。 这样做是这样的：

let camX = -player.pos.x + this.canvas.width / 2;
tet camY = -player.pos.y + this.canvas.height / 2;

this.context.translate(camX, camY);

它似乎工作得很好。 当我想让玩家点击屏幕上的某个地方并将该点击转换为世界坐标时，我的问题就出现了。 也就是说，如果玩家点击某处，我应该可以使用相对鼠标position结合相机变换来获得点击的世界坐标。

我认为它会像下面这样简单：

let worldX = -camX + input.mousePosition.x;
let worldY = -camY + input.mousePosition.y;

但这似乎不起作用。 如果我使用的是普通相机 object，我会采用我认为的逆矩阵，但这只是一个简单的 canvas，所以我不确定在这种情况下是否可以这样做。

Answer 1

我想到了。 这是因为我正在使用缩放，这会导致计算失败。 我不确定如何手动执行，但我发现 canvas 具有矩阵变换和逆函数，因此我创建了这两个函数，它们似乎可以工作：

static getWorldCoordsFromRelative(ctx: any, position: Vec2) {
  let matrix = ctx.getTransform();
  var imatrix = matrix.invertSelf();

  return new Vec2(position.x * imatrix.a + position.y * imatrix.c + imatrix.e,
                  position.x * imatrix.b + position.y * imatrix.d + imatrix.f);
}

static getRelativeCoordsFromWorldCoords(ctx: any, position: Vec2) {
  let matrix = ctx.getTransform();
  
  return new Vec2(position.x * matrix.a + position.y * matrix.c + matrix.e,
                  position.x * matrix.b + position.y * matrix.d + matrix.f);
}