我正在制作一个基于 HTML5 Canvas 六边形网格的系统，我需要能够检测到在单击 Canvas 时单击了网格中的哪个六边形图 block 。

几个小时的搜索和尝试我自己的方法一无所获，从其他语言移植实现让我感到困惑，以至于我的大脑变得迟钝。

网格由平顶正六边形组成，如下图所示:

本质上，给定一个点和此图像中指定的变量作为网格中每个六边形(R、W、S、H)的大小:

我需要能够确定一个点是否在给定的六边形内。

一个示例函数调用是 pointInHexagon(hexX, hexY, R, W, S, H, pointX, pointY) 其中 hexX 和 hexY 是边界框左上角的坐标六 Angular 形瓷砖(如上图中的左上角)。

有没有人知道如何做到这一点？速度目前不是什么大问题。

最佳答案

简单快速的对 Angular 矩形切片。

看看其他答案，我发现他们都把问题复杂化了一点。以下是比接受的答案快一个数量级并且不需要任何复杂的数据结构、迭代器或生成死内存和不需要的 GC 命中。它返回任何相关 R、H、S 或 W 集合的十六进制单元格行和列。该示例使用 R = 50。

部分问题是如果矩形被对 Angular 线分割，则找出一个点在矩形的哪一侧。这是一个非常简单的计算，通过标准化要测试的点的位置来完成。

沿对 Angular 线切割任何矩形

例如，一个宽度为 w、高度为 h 的矩形从左上角到右下角分开。判断一个点是左还是右。假设矩形的左上角在 rx,ry

var x = ?;
var y = ?;
x = ((x - rx) % w) / w;
y = ((y - ry) % h) / h;
if (x > y) { 
    // point is in the upper right triangle
} else if (x < y) {
    // point is in lower left triangle
} else {
    // point is on the diagonal
}

如果你想改变对 Angular 线的方向，那么只需反转其中一条法线

x = 1 - x;  // invert x or y to change the direction the rectangle is split
if (x > y) { 
    // point is in the upper left triangle
} else if (x < y) {
    // point is in lower right triangle
} else {
    // point is on the diagonal
}

拆分为子单元格并使用%

剩下的问题只是将网格拆分为 (R/2) x (H/2) 个单元格宽度，每个十六进制覆盖 4 列和 2 行。 3 列中的每一列都有对 Angular 线。这些列的每一秒都有对 Angular 线翻转。对于每 6 列中的第 4、5 和 6 列，该行向下移动一个单元格。通过使用 %，您可以非常快速地确定您所在的十六进制单元格。使用上面的对 Angular 线分割方法可以使数学变得简单快捷。

还有一点。返回参数 retPos 是可选的。如果你调用函数如下

var retPos;
mainLoop(){
    retPos = getHex(mouse.x, mouse.y, retPos);
}

代码不会产生 GC 命中，进一步提高了速度。

像素到十六进制坐标

从问题图返回十六进制单元格 x , y位置请注意，此功能仅适用于 0 <= x 范围内, 0 <= y如果您需要负坐标，请从输入中减去最小负像素 x,y 坐标

// the values as set out in the question image
var r = 50; 
var w = r * 2;
var h = Math.sqrt(3) * r;
// returns the hex grid x,y position in the object retPos.
// retPos is created if not supplied;
// argument x,y is pixel coordinate (for mouse or what ever you are looking to find)
function getHex (x, y, retPos){
    if(retPos === undefined){
        retPos = {};
    }
    var xa, ya, xpos, xx, yy, r2, h2;
    r2 = r / 2;
    h2 = h / 2;
    xx = Math.floor(x / r2);
    yy = Math.floor(y / h2);
    xpos = Math.floor(xx / 3);
    xx %= 6;
    if (xx % 3 === 0) {      // column with diagonals
        xa = (x % r2) / r2;  // to find the diagonals
        ya = (y % h2) / h2;
        if (yy % 2===0) {
            ya = 1 - ya;
        }
        if (xx === 3) {
            xa = 1 - xa;
        }
        if (xa > ya) {
            retPos.x = xpos + (xx === 3 ? -1 : 0);
            retPos.y = Math.floor(yy / 2);
            return retPos;
        }
        retPos.x = xpos + (xx === 0 ? -1 : 0);
        retPos.y = Math.floor((yy + 1) / 2);
        return retPos;
    }
    if (xx < 3) {
        retPos.x = xpos + (xx === 3 ? -1 : 0);
        retPos.y = Math.floor(yy / 2);
        return retPos;
    }
    retPos.x = xpos + (xx === 0 ? -1 : 0);
    retPos.y = Math.floor((yy + 1) / 2);
    return retPos;
}

十六进制到像素

还有一个辅助函数，它根据单元格坐标绘制单元格。

// Helper function draws a cell at hex coordinates cellx,celly
// fStyle is fill style
// sStyle is strock style;
// fStyle and sStyle are optional. Fill or stroke will only be made if style given
function drawCell1(cellPos, fStyle, sStyle){    
    var cell = [1,0, 3,0, 4,1, 3,2, 1,2, 0,1];
    var r2 = r / 2;
    var h2 = h / 2;
    function drawCell(x, y){
        var i = 0;
        ctx.beginPath();
        ctx.moveTo((x + cell[i++]) * r2, (y + cell[i++]) * h2)
        while (i < cell.length) {
            ctx.lineTo((x + cell[i++]) * r2, (y + cell[i++]) * h2)
        }
        ctx.closePath();
    }
    ctx.lineWidth = 2;
    var cx = Math.floor(cellPos.x * 3);
    var cy = Math.floor(cellPos.y * 2);
    if(cellPos.x  % 2 === 1){
        cy -= 1;
    }
    drawCell(cx, cy);
    if (fStyle !== undefined && fStyle !== null){  // fill hex is fStyle given
        ctx.fillStyle = fStyle
        ctx.fill();
    }
    if (sStyle !== undefined ){  // stroke hex is fStyle given
        ctx.strokeStyle = sStyle
        ctx.stroke();
    }
}

关于JavaScript 与正六边形的点碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40776014/