将屏幕坐标转换为等距地图坐标

Question

我正在使用菱形图案生成等距瓷砖地图：

tileWidth = 128;
tileHeight = 94;

for (var x = 0; x < rows; x++) {
  for (var y = 0; y < cols; y++) {
    var screenX = (x - y) * tileWidthHalf;
    var screenY = (x + y) * tileHeightHalf;
    drawTile(screenX, screenY);
  }
}

这可以正确渲染，但现在我在将屏幕坐标（鼠标位置）转换回等距坐标时遇到问题。

我尝试过反转数学：

var x = _.floor(screenY / (tileWidth / 2) - (screenX / tileWidth / 2));
var y = _.floor(screenY / (tileHeight / 2) + (screenX / tileHeight / 2));

它对于瓷砖效果很好0, 0，但之后无法产生正确的值。

我只是无法得出正确的数学结果 - 我是否遗漏了一些微不足道的东西，或者我对整个过程都错了？

Answer 1

我不明白你是如何想出这个解决方案的。您必须求解方程组，该方程组给出以下解：

x = 0.5 * ( screenX / tileWidthHalf + screenY / tileHeightHalf)
y = 0.5 * (-screenX / tileWidthHalf + screenY / tileHeightHalf)

如果您需要图块索引，请floor在代码中使用 as 。

我只能猜测你在坐标系中的图块对齐方式是什么样的。但从您在评论中发布的屏幕截图来看，我认为您需要交换screenX才能(screenX - tileWidthHalf)获得准确的值。