javascript - 使用 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));
    }
}

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

标签： javascripthtml5-canvasgeometry

Answer 1

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

你的六边形是平顶的，因为 (0,0)-centered hex left top vertex has coordinates (-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;

生成