使用鼠标光标坐标定义标题.等距社交游戏

Question

在社交等轴测游戏书中，第53页，该方法的描述使用鼠标光标坐标来定义标题。它运行良好，但尚不清楚哪些原则用于使其起作用。有人可以详细说明这种算法吗？也许您有一些公式的链接。或者，也许您可以向我建议我应该研究哪个科学领域。

这是我感兴趣的代码的示例：

var col = (e.clientY - gridOffsetY) * 2;  //???
col = ((gridOffsetX + col) - e.clientX) / 2;  //???
var row = ((e.clientX + col) - tile.height) - gridOffsetX; //???

Answer 1

如我所见，菱形单元的高度为2*p，宽度为4*p，其中p是特征大小值。

让我们的基点的坐标 - 顶部电池的顶部VERTICE为（0，0）。

因此，顶部边缘向量为tr=(2p, p)，左上角向量为tl=(-2p, p)。

让我们的鼠标点相对于基点是(mx, my)。要查找其属于的单元格，可以通过基础向量tl, tr

分解向量(mx, my)

 mx = R * tl.x + C * tr.x
 my = R * tl.y + C * tr.y
 or
 mx = R * 2 * p + C * p
 my = R * (- 2 * p) + C * p

要找到C，我们可以添加两个方程

mx + my = 2 * C * p
C = (mx + my) / (2 * p)
column = Floor(C)  //integer part of C  

找到R，减去方程

R = (mx - my) / (4 * p)
row = Floor(R) 

其他计算考虑了屏幕上网格的变化