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

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

而且它似乎运行得很好。当我想让玩家点击屏幕上的某个地方，并将点击转化为世界坐标时，我的问题就来了。也就是说，如果玩家点击某个地方，我应该能够使用鼠标的相对位置结合相机变换来获得点击的世界坐标。

我认为它会简单如下：

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

但它似乎不起作用。如果我使用的是普通的相机对象，我想我只会取逆矩阵，但这只是一个简单的画布，所以我不确定在这种情况下我是否能做到。

Answer 1

我想明白了。这是因为我使用了缩放，这会打乱计算。我不知道如何手动完成，但我发现画布有矩阵变换和逆函数，所以我创建了这两个函数，它们似乎有效：

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