如何在Javascript画布游戏中从鼠标坐标转换为世界坐标？

我正在使用2d画布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);

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

我想它会像下面这样简单：

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

---

但它似乎不起作用。如果我使用的是一个普通的相机对象，我想我会取逆矩阵，但这只是一个简单的画布，所以我不确定在这种情况下我是否能做到。这是因为我使用的是zoom，这会使计算过程中断。我不知道如何手动操作，但我发现画布上有矩阵变换和逆函数，所以我创建了这两个函数，它们似乎可以工作：

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);
}

---

为什么使用翻译？听起来在画布中心画玩家会更容易，因为玩家在世界各地移动，并且有世界坐标。相机是画布，它被转换为平移以使播放器保持在屏幕的中心。抱歉，我仍然认为没有必要使用平移，您可以在画布的中心绘制播放器，而无需使用平移。。。也许你可以把一个最小的工作代码片段放在一起显示问题。。。我感觉你不是在使用游戏引擎，你在评论中描述的：大世界、翻译、缩放和用户输入都已经解决了。。。有很多免费和开源的引擎，只要选择一个，省去一些麻烦：对我有用：