我有两个接收坐标的函数没有返回正确的输出。
接收鼠标相对于元素的位置并返回等距图 block 的网格坐标。 另一个函数本质上是将这个过程从 iso block 反转回屏幕上的像素位置。
当我发送鼠标位置的坐标并将其转换为等轴测图,然后将其转换回像素位置时,我得到的结果与我开始时的结果有很大不同,而不是图 block 大小的舍入- 表明我在某些地方犯了数学错误,但不确定在哪里。
我的两个功能是:
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)}
}
只是一些额外的信息,网格高度 == 46
和 网格宽度 == 92
。
有人能看出我的数学逻辑哪里出了问题吗?
最佳答案
在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;
关于javascript - 将坐标转换为等距坐标,反之亦然不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31870308/