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

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

        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）;获取我徘徊在哪个瓷砖上。

最佳答案

初步观察

等距图块网格只是一个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开始，并以线性方式减小至底部的0 px。

在图块t(ty,tx)和像素p(i,j)，(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的底部。

两者之间的差是线性的，总计为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。

关于javascript - 如何将像素坐标转换为等距网格坐标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18852333/