Обнаружение всех пикселей в шестиугольнике с помощью JS / HTML5 Canvas - PullRequest
Новая
       20

Обнаружение всех пикселей в шестиугольнике с помощью JS / HTML5 Canvas

0 голосов
/ 29 мая 2018

В javascript у меня есть карта, которую я хотел бы наложить на гексы и превратить эти гексы в зеленый (земля) или синий (вода) в зависимости от того, сколько земли находится в гексе.Я предполагаю, что это как-то связано с определением цвета пикселя, и если он находится в диапазоне, который я считаю синим, то он считается как «вода», как только он достигает определенного количества пикселей, которые являются водой, он просто превращается в водуtile.

Проблема, с которой я столкнулся, заключается в том, что я знаю, что должен определить, где сканировать все пиксели, которые я хочу определить цвет, но я не знаю, как это сделать с гексом.С квадратной сеткой я мог бы сделать гнездо для цикла, но понятия не имел, как сделать это с гексом.

Чтобы нарисовать гекс, я использую следующее 

    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));
    }
}

Но я нене вижу, как я мог бы использовать это для определения, какие пиксели для обнаружения.Я не очень хорош в математике.

1 Ответ

0 голосов
/ 29 мая 2018

Вы можете сканировать шестнадцатеричные строки, как прямоугольник.Но ваш внутренний цикл должен варьировать свои пределы.

Ваш гекс имеет плоскую вершину, для (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

Код Delphi: 

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;

генерирует

enter image description here

...