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

Question

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

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;

但它似乎不起作用。如果我使用的是普通相机对象，我会采用我认为的逆矩阵，但这只是一个简单的 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);
}

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

How to convert from mouse coordinates to world coordinates in a Javascript canvas game?

javascript

canvas

transform

matrix