如何将像素坐标转换为等距网格坐标？

Question

我没有太多的麻烦可以弄清楚放置瓷砖的位置或找到瓷砖的角，但是我无法弄清楚确定要悬停的像素属于哪个网格单位的数学/公式。 我的网格像这样运行：

        y0,x0|y0,x1|y0,x2
     y1,x0|y1,x1|y1,x2
  y2,x0|y2,x1|y2,x2

y0，x0为顶部/背面，并居中于画布的顶部边缘。 瓷砖的宽度是通常的两倍。 我已经获得了偏移代码，因此我的鼠标像素坐标偏移与我的图块相同，但是我很困惑。

编辑：很抱歉这个令人困惑的问题。 整夜的代码会话疲劳。

我有这个功能（在这里简化）：

getTilePixelCoord(x,y)
{
    p.x = S-yH+xH;
    p.y = yM+xM;
    return p;
}

我用来放置瓷砖的地方。 S是原点，始终放置0y，0x，H是图块像素高度，M是H / 2。 我需要的是与此相反的方法，即getPixelTileCoord（pixelx，pixely）; 获取我徘徊在哪个瓷砖上。

Answer 1

初步观察

等距图块网格只是一个x坐标已移动的常规矩形网格，具体取决于有多少行。

Rectangular Grid (y,x)

             v length (L)
          +_____+xxxxx+xxxxx+
          x     x     x     x
No offset>+xxxxx+xxxxx+xxxxx+
          x     x     x     x
          +xx|xx+xxxxx+xxxxx+
          x  |  x     x     x
          +xx|xx+xxxxx+xxxxx+
             ^ height (H)

+: corners

每个图块的长度边缘为L px，垂直于该边缘的高度为H px。 每行的等距像素偏移为O px。

Isometric Grid (y,x)

                  V length (L) is the same as above
height     ......+_____+xxxxx+xxxxx+
dependent >_____x 0,0 x     x     x
offset     ....+xxxxx+xxxxx+xxxxx+
(O)        ...x     x     x 1,2 x
           ..+x|xxx+xxxxx+xxxxx+
           .x  |  x     x     x
           +xxx|x+xxxxx+xxxxx+
               ^ height (H) is the same as above

+: corners

符号

• t(ty,tx)指垂直位于ty且水平位于tx的图块
• p(i,j)指像素位置（以像素为单位）
• MAX_Y指瓦片行数

（所有位置始终始终与垂直组件一起列出。）

例子

防爆。 1

如果进行计数，您会注意到t(0,0)的角位于以下像素位置：

• p(0, 3O) ：左上方
• p(H, 2O) ：左下
• p(0, 3O+L) ：右上方
• p(H, 2O+L) ：右下

这四个点中的每个点也是其他图块的角。

防爆。 2

我们可以看到t(1,2)作为另一个示例。 它们的角位于以下像素位置：

• p(H, 2O+2L) ：左上方
• p(2H, O+2L) ：左下
• p(H, 2O+3L) ：右上方
• p(2H, O+3L) ：右下

一般情况

对于tx每个单位增加（从t(ty,tx)到t(ty,tx+1) ），边角的水平像素位置会改变L px 。

对于ty每个单位增加（从t(ty,tx)到t(ty+1,tx) ），角的水平像素位置变化-O px ，而角的垂直像素位置变化H px 。

概括地说，图块t(ty,tx) （行数为Y_MAX ，因此对于我们的示例来说， Y_MAX = 3 ）位于以下像素位置：

p(    ty*H,   (Y_MAX-ty)*O +     tx*L) - top left
p((ty+1)*H, (Y_MAX-ty-1)*O +     tx*L) - bottom left
p(    ty*H,   (Y_MAX-ty)*O + (tx+1)*L) - top right
p((ty+1)*H, (Y_MAX-ty-1)*O + (tx+1)*L) - bottom right

您可以插入上面的示例以显示这些是正确的位置。

像素平铺

垂直位置

对于图块t(ty,tx)和p(i,j) ， ty*H <= i < (ty+1)*H

ty*H <= i   < (ty+1)*H
ty   <= i/H < ty+1
ty = floor(i/H)

因此， ty = floor(i/H) 。

水平位置

水平位置要稍微复杂一点，因为偏移量（进而是水平位置）取决于像素的垂直位置。 我们可以看到，偏移量从顶部的O*Y_MAX px开始， O*Y_MAX px线性减少到0 px。

在图块t(ty,tx)和像素p(i,j) (Y_MAX-ty)*O + tx*L <= j < (Y_MAX-ty)*O + (tx+1)*L ， (Y_MAX-ty)*O + tx*L <= j < (Y_MAX-ty)*O + (tx+1)*L 。

在图块t(ty,tx)和像素p(i,j) (Y_MAX-ty-1)*O + tx*L <= j < (Y_MAX-ty-1)*O + (tx+1)*L ， (Y_MAX-ty-1)*O + tx*L <= j < (Y_MAX-ty-1)*O + (tx+1)*L

两者之间的差是线性的，总计为O px 。

要了解到目前为止，我们是顺着瓦，我们可以使用frac(i/H)小数部分i/H 。 例如，在p(80,0) ，如果每个图块的高度为H=30 ，则相对于图块的顶部，我们将为frac(80/30) = 20 px ； 换句话说，下降了三分之二。 从上面我们可以看到ty是floor(i/H)实际上是i/H的整数部分。 因此， ty+frac(i/H) = i/H

---

因此，对于图块t(ty,tx)和像素p(i,j) ， (Y_MAX-i/H)*O + tx*L < j < (Y_MAX-i/H)*O + (tx+1)*L

(Y_MAX-i/H)*O + tx*L <= j                     < (Y_MAX-i/H)*O + (tx+1)*L
tx*L                 <= j-((Y_MAX-i/H)*O)     < (tx+1)*L
tx                   <= (j-((Y_MAX-i/H)*O))/L < tx+1
tx = floor((j-((Y_MAX-i/H)*O))/L)

因此， tx = floor((j-((Y_MAX-i/H)*O))/L) 。

解

对于任何点p(i,j) ，图块t(ty,tx)都位于t(floor(i/H),floor((j-((Y_MAX-i/H)*O))/L)) 。

您的具体情况

就您的目的而言， L = 2H和O = H是可能的参数。 采用上述解决方案并替换O和L会将结果减少到一个依赖项H