将坐标转换为等轴测图，反之亦然不起作用

Question

我有两个接收坐标但未返回正确输出的函数。

接收鼠标相对于元素的位置和 returns 等距图块的网格坐标。另一个函数基本上反转了这个过程，从 iso tile 回到屏幕上的像素位置。

当我为我的鼠标位置发送坐标并将其转换为等轴测图，然后将其转换回像素位置时，我得到的结果与我开始的结果大不相同，而不是四舍五入图块大小 - 提示我在某些地方算错了，但我不确定在哪里。

我的两个函数是：

function isoToScreen(isoX,isoY){ //recieves simple grid co-ordinate (int,int)

var x = (isoX - isoY) * (grid.getWidth()/2),
    y = (isoX + isoY) * (grid.getHeight()/2);

    //need to remove the camera offset to get the relative position
    x = camera.removeOffsetX(x); 
    y = camera.removeOffsetY(y); 

    return {'x':x,'y':y};

}

function screenToIso(x,y){ //receives mouse position relative to canvas

    //add camera offset to get the correct isometric grid
    x = camera.addOffsetX(x);
    y = camera.addOffsetY(y);

var isoX = x / (grid.getWidth()/2)  + y /  (grid.getHeight()/2),
    isoY = y / (grid.getHeight()/2) - x /  (grid.getWidth()/2);

    return {'x':Math.floor(isoX),'y':Math.floor(isoY)}
}

只是一些额外的信息，grid height == 46 和 grid width == 92。

谁能看出我的数学逻辑哪里出了问题？

Answer 1

在 screenToIso 中，您将向量 [x;y] 乘以矩阵：

[  2 / grid.getWidth(), 2 / grid.getHeight()]
[ -2 / grid.getWidth(), 2 / grid.getHeight()]

它的inverse是：

[grid.getWidth()  / 4, -grid.getWidth()  / 4]
[grid.getHeight() / 4,  grid.getHeight() / 4]

因此 isoToScreen 的前两行应该是：

var x = (grid.getWidth()  / 4) * isoX - (grid.getWidth()  / 4) * isoY;
var y = (grid.getHeight() / 4) * isox + (grid.getHeight() / 4) * isoY;

将坐标转换为等轴测图，反之亦然不起作用

Convert co-ordinates to isometric and vice versa not working

javascript

math

isometric