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

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

Pixel To Tile

垂直位置

对于图块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。

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

1 个答案: