FloodFill на JavaScript

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

Я лениво ковырялся в старых фотках, в недописанных или давно устаревших заметках, в древних версиях программ и библиотек, в своём заброшенном коде… и вот тут-то я ВНЕЗАПНО наткнулся на целый графический редактор на JavaScript, причём полностью собственного написания!

Интерфейс редактора
Интерфейс редактора

Подумать только — у меня было время и были силы на создание подобных вещей, да ещё и 100% самостоятельно, включая всяческую графику! Это же уму, как говорится, нерастяжимо! В общем, испытав лютую зависть к самому себе, я полез разбираться в код — и вспомнил, что алгоритм заливки области цветом (FloodFill) тоже написан когда-то полностью мной, да ещё и работает безошибочно и почти мгновенно! На любых областях!

Вот, убедитесь сами. Рисуем большую фигуру совершенно запредельной сложности:

Композиция «амёба-наркоманка»
Композиция «амёба-наркоманка»

Потом выбираем заливку и тыкаем в любую точку амёбы, а для сложности задачи — в самый кончик закрученной тонкой «ножки». И не успеваем даже моргнуть, как наша амёба стыдливо розовеет!

Амёба, залитая цветом. Честное слово, за малые доли секунды!
Амёба, залитая цветом. Честное слово, за малые доли секунды!

Белые пятна возле линий — не ошибки алгоритма, это из-за сглаживания линии. Такой код, по-моему, нельзя прятать от общественности. Особенно если учесть, что проверка проводилась на старом компьютере, в древней версии браузера.

Что и как?

К сожалению, я начал уже основательно забывать JavaScript, но ко всему прочему — код ещё и отлично прокомментирован! Нет, ну откуда у меня бралось время, а?

Вот весь исходник, любезно завёрнутый в псевдокласс:

Повторю: я честно уже плохо помню JS. Но моих познаний достаточно, чтоб понять происходящее и методы использования. В самом коде вызов заливки по клику происходит так:

Метод floodFill() принимает на вход контекст рисования HTML-канвы, координаты точки для старта и цвет, заданный, например, вот так:

Всё, остальное делает магия внутри.

Зачем это нужно?

Врать не буду — точно не знаю.

Вряд ли кто-то часто пишет графические редакторы на JS. Да и если такое нужно, наверняка уже появились свободные и бесплатные альтернативы со всеми наворотами. Или же сам canvas научился делать заливку. В общем — наверное, код представляет только академический интерес.

Публикую я его скорее из ностальгии: умел, мог! Но не оставляю надежды, что он пригодится. Например, небольшим изменением метода isNeededPixel() можно сделать регулируемый color tolerance вместо поиска точных совпадений цвета, а это бывает ценно. Опять же, код весьма прост, и может служить основой для изучения алгоритма flood fill как такового.

Моя старая идея, под которую писался код, будет (наверное) неактуальна в современных реалиях. Переосмыслить и допилить — думаю, не хватит уже растерянных на жизненном пути талантов. Но вот принести пользу кому-то… а вдруг?

Пользуйтесь, если нужно.

FloodFill на JavaScript
5, голосов: 8


Комментарии:

Один комментарий на «“FloodFill на JavaScript”»

  1. >Вряд ли кто-то часто пишет графические редакторы на JS.
    Зато полноценные графические редакторы могут поддерживать скрипты на JS. Например, вся линейка софта от адобы.
    Спасибо — пригодится. Утащил на опыты.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Капча (решите пример) *