使用JS / HTML5 Canvas检测六边形中的所有像素

Question

在javascript中我有一张地图，我想用六边形覆盖，并根据十六进制中有多少土地将这些六边形转为绿色（陆地）或蓝色（水）。 我认为它与检测像素颜色有关，如果它在我认为是蓝色的范围内，那么一旦它达到一定数量的像素水就会被计为“水”，它就会变成水瓦。

我遇到的问题是，我知道我必须定义扫描所有想要进行颜色检测的像素的位置，但我不知道如何使用十六进制执行此操作。使用正方形网格，我可以为循环执行嵌套，但不知道如何使用十六进制。

要绘制十六进制，我使用以下

    function hex(x = 0, y = 0, side = 0, size = 10) {
    ctx.beginPath();
    ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

    for (side; side < 7; side++) {
        ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
    }
}

但我不知道如何使用它来确定要检测的像素。我不擅长数学。

Answer 1

您可以像矩形一样逐行扫描。但是你的内循环应该改变它的极限。

你的十六进制是平顶的，对于（0,0）中心的六角形左上顶点有坐标(-side/2, -side * Sqrt(3)/2)。让p = Sqrt(3)/2。

外部（y坐标）循环限制是

  -side * p .. side * p

对于给定的y坐标x-限制是

-(side - 0.5 * Abs(y)) / p  .. (side - 0.5 * Abs(y)) / p

德尔福代码：

var
  ix, iy, side: Integer;
  cf: Double;
begin
  cf := Sqrt(3) / 2;
  side := 100;
  for iy :=  - Round(cf * side) to Round(cf * side) do
     for ix := - Round((side - 0.5 * Abs(iy) / cf)) to
                 Round((side - 0.5 * Abs(iy) / cf)) do
         Canvas.Pixels[ix + 200, iy + 200] := clBlue;

产生