【问题标题】:Convert co-ordinates to isometric and vice versa not working将坐标转换为等距坐标,反之亦然不起作用
【发布时间】:2015-08-07 05:28:51
【问题描述】:

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

一个接收鼠标相对于元素的位置并返回等距图块的网格坐标。 另一个函数基本上将这个过程从 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 == 46grid width == 92

谁能看出我的数学逻辑哪里出错了?

【问题讨论】:

  • 在你的函数 screenToIso(x,y) 我觉得你应该把数学运算用括号括起来,因为有嵌套的除法。根据我的经验,它有所作为。这是一个例子jsfiddle.net/zba7jcyr
  • @Puni 感谢您的回复,我尝试了您的更改,但没有解决问题。我将使用添加的括号来更新我的问题以排除该问题。

标签: javascript math isometric


【解决方案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;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-22
    • 2013-08-08
    • 2018-05-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多