@kirillleogky

Как реализовать заливку канваса?

мне необходимо реализовать заливку с помощью кнопки "Paint bucket" части выделенной области до начала нового цвета
Что я имею ввиду:


Кликая здесь:
5dc6da6761fef764754715.png


Я хотел бы чтобы область область ниже закрасилась в цвет Current Color(на примере зелёным):
5dc6dabbe778c456968086.png

Мой код
Сейчас заливка полностью перекрашивает канвас

В нём есть часть закоментированного кода(он же ниже) - это моё решение но оно не работает на другой части канваса:
let x = currCanvasColorColumn;
    let y = currCanvasColorRow;
    let pixelPos = {x: currCanvasColorColumn, y: currCanvasColorRow};

    let basicColor = frame4x4[pixelPos.y][pixelPos.x];

    while (x > -1 && y > -1 && basicColor == frame4x4[y][x]) {
      while (basicColor == frame4x4[y][x]) {
        frame4x4[y][x] = `${currColor.style.backgroundColor}`;
        x--;
      }
      x = pixelPos.x;
      frame4x4[y][x] = `${currColor.style.backgroundColor}`;
      y--;
    }
     x = pixelPos.x;
     y = pixelPos.y;
    while (x < 4 && y < 4 && basicColor == frame4x4[y][x]) {
      while (basicColor == frame4x4[y][x]) {
        frame4x4[y][x] = `${currColor.style.backgroundColor}`;
        x++;
      }
      x = pixelPos.x;
      frame4x4[y][x] = `${currColor.style.backgroundColor}`;
      y++;
    }





Подскажите как реализовать данную заливку?
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ответы на вопрос 1
@UnformedVoid
Разработчик ПО
Ваш алгоритм сложно читать, но, по ощущениям, он «ходит» по диагонали — от этого и заливает всё. Самый простой способ сделать заливку — рекурсия. Псевдокод:
recursiveFill(point, color) {
  currentColor = getColorOfPoint(point)
  if (color == currentColor) {
    return;
  }
  changeColorOfPoint(point, color)
  recursiveFill(new Point(point.x + 1, point.y), color);
  recursiveFill(new Point(point.x - 1, point.y), color);
  recursiveFill(new Point(point.x, point.y + 1), color);
  recursiveFill(new Point(point.x, point.y - 1), color);
}

Простейший вариант. Проверки на пределы массива не стал писать — они очевидны. Понятное дело это не самый эффективный подход для больших массивов. Вот вам почитать:
https://ru.wikipedia.org/wiki/Заливка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы