Fatal编程技术网
  • canvas/
  • Canvas 查找在等轴测交错柱系统中单击的平铺

Canvas 查找在等轴测交错柱系统中单击的平铺

canvas html5-canvas

Canvas 查找在等轴测交错柱系统中单击的平铺,canvas,html5-canvas,2d,isometric,Canvas,Html5 Canvas,2d,Isometric,我的网格 tileWidth = 64px tileHeight = 128px （图像本身是128px，但实际的钻石高32px，宽64px） 正如你所看到的，我有一个交错的网格系统；然而，在过去的两个小时里，我一直在想一个系统，在这个系统中，我可以获取相对于画布的鼠标坐标，并找出单击了什么瓷砖（显然是在菱形字段中） 例如，如果我单击了tile21、26——我将如何在程序中找到它 如果您能给我们指点方向，我们将不胜感激。谢谢 如果您知道单元的中心位置（当然是在渲染单元后才知道的），只需对单元

我的网格

tileWidth = 64px
tileHeight = 128px
（图像本身是128px，但实际的钻石高32px，宽64px）

正如你所看到的，我有一个交错的网格系统；然而，在过去的两个小时里，我一直在想一个系统，在这个系统中，我可以获取相对于画布的鼠标坐标，并找出单击了什么瓷砖（显然是在菱形字段中）

例如，如果我单击了tile
21、26
——我将如何在程序中找到它

如果您能给我们指点方向，我们将不胜感激。谢谢

如果您知道单元的中心位置（当然是在渲染单元后才知道的），只需对单元的坐标进行规格化，以确定其是否在内部：

var dx = Math.abs(x - cellCenterX),
    dy = Math.abs(y - cellCenterY);

if (dx / (cellWidth * 0.5) + dy / (cellHeight * 0.5) <= 1) { /* is inside */ };

var dx=Math.abs（x-cellCenterX），
dy=Math.abs（y-cellCenterY）；

如果（dx/（cellWidth*0.5）+dy/（cellHeight*0.5）很棒，这是一个很大的帮助！谢谢！您是否考虑过更有效的方法
y=Math.acos（Math.cos（x））
来获得偏移量，并确定tileX/tileY的值