Делаем сложную векторную фигуру трассировкой

   Трассировкой называется обводка контуров растрового изображения с тем, чтобы получить фигуру векторной графики.
   Изображение, которое Вы видите на иллюстрации вверху, взято из интернета. Векторное изображение получено на пятом этапе, и Вы можете видеть его снизу справа. Это изображение можно перемещать, поворачивать и масштабировать. Его детали можно редактировать - окрашивать в разные цвета, менять толщину линии обводки и изменять контуры.
   Векторное изображение составлено из ломаных линий. Как оно получается, сейчас мы это обсудим.

1. ДИСКРИМИНАЦИЯ ЦВЕТА

   На первом этапе мы опрощаем растровое изображение - делаем его простым в цветовом отношении. В числах, описывающих цвет в трёх его компонентах (BGR) оставляем только старшие биты. Все остальные биты устанавливаем в ноль. В результате изображение темнеет и разбивается на однотонно окрашенные области.
   Как практически делается дискриминация цвета подробно описано тут - http://proza.ru/2021/02/02/362
   Выбранную для дискриминации область мы кликаем по диагональным углам левой кнопкой мыши. Затем выставляем на кнопках-компонентах цвета значение 444 (оставляем только старшие биты), устанавливаем синий ластик (указываем на опцию дискриминации цвета) и кликаем кнопку «Ц» на левой панели.

2. ИЗМЕНЕНИЕ ЦВЕТА

   Мы можем продолжить цветовое опрощение изображения, перекрашивая отдельные области в другой цвет. Например, давайте перекрасим жёлтые области в белый цвет.
   Выделение всей картинки кликами по углам, оставшееся после предыдущего этапа, у нас всё ещё действует. Поэтому просто кликнем ПРАВОЙ кнопкой мыши сначала жёлтый цвет на изображении, а затем – белый цвет. После этого кликаем кнопку «Swap», и у нас области жёлтого цвета становятся белыми.

3. ДОРАБОТКА ИЗОБРАЖЕНИЯ

   Точно таким же способом, выделяя правые части изображения, перекрасим зелёные и серые области в белый цвет.
   Перейдём в режим рисования (установим серый ластик) и прочертим белым те границы изображения бабочки, которые всё ещё прилегают к фону. И прочертим чёрным цветом усики и ножки, сделав их более явными, а также некоторые линии на крыльях, соединив их с чёрными пятнами.
   Теперь наша бабочка готова к оконтуриванию.

4. СОЗДАНИЕ ЛОМАНЫХ ЛИНИЙ

   Включаем редактор векторной графики. Выставляем размер точки рисования 3 и цвет рисования - красный.
   Кликаем (левой кнопкой мыши) на белом фоне правее головы бабочки и нажимаем клавишу «ё» (эта процедура подробно описана тут - http://proza.ru/2020/12/09/1432 ). Получаем контур бабочки, выполненный красными точками размером в 1 пиксель. Чтобы превратить контур бабочки в фигуру векторной графики, кликаем кнопку «закр».
   Видим надпись « записано в строку 1 ».
   Точно также поступаем, кликая внутри белых пятен на крыльях бабочки. Если размер пятна рисования мы при этом не меняли, то после завершения процесса мы можем кликнуть строку меню «Нарисовать», и тогда мы получим изображение всех наших векторных фигур (ломаных линий), наложенных поверх нашего рисунка.

5. РАСКРАШИВАНИЕ ВЕКТОРНОЙ ГРАФИКИ

   Внутреннюю структуру крыльев (белых пятен) лучше делать тонкими линиями, размером в один, а не в три пикселя. Тогда крылья получатся более ажурными. Чтобы раскрасить белые пятна на крыльях кликаем строку меню «Показать» и переходим в режим Показа.
   В режиме показа начальная точка каждой ломаной линии показывается отдельным кружочком. Нужное нам для раскраски белое пятно мы выбираем, кликнув по его начальной точке ПРАВОЙ кнопкой мыши.
   Кликаем строку меню «Параметры» и получаем на кнопках те параметры, в которых нарисована выбранная нами фигура векторной графики.

   Если Вы создали выбранную фигуру только что, то, обратите внимание - на кнопке «Плотность» в верхней части меню стоит цифра 6, соответствующая однотонной заливке. Однако никакого раскрашивания фигуры не будет. Чтобы заливка фигуры краской происходила, нужно кликнуть начальную точку заливки внутри выбранного контура, тем самым указать координаты этой точки, и тут же нажать клавишу «G» на верхнем регистре. И только тогда контур будет залит теми цветами, на которые указывали кнопка активного цвета и кнопка фона после клика по строке «Параметры».

   Указанные цвета можно изменить, но если прямо сейчас кликнуть по кнопке «закр», то ничего не произойдёт – в программе установлен предохранитель от таких случайных действий.
   Чтобы сделать изменения, кликаем по кнопке с маленькой буквой «о» на левом крае левой панели и переводим эту кнопку в состояние «ф». Теперь мы можем выбрать для нашего пятна другой цвет его заполнения (установив нужный цвет фона), и, если хочется, поменять цвет окантовки пятна, избрав для этого другой активный цвет.
   И уже после этого мы кликаем кнопку «закр» и видим, что выбранное нами пятно действительно изменилось в своём цвете.
   Выполняя эти преобразования, можно менять и другие параметры раскраски, про это подробно рассказывается вот тут - http://proza.ru/2020/11/08/203

   И вот теперь наша векторная бабочка может летать. Чтобы она перелетела на другое место сразу со всеми своими элементами, устанавливаем ластик сиреневого цвета и передвигаем любой элемент бабочки.
   О том, как организовано перемещение групп векторных элементов подробно рассказывается в разделе «Help» программы DM_Paint.
   Полученный векторный рисунок бабочки можно перевести в формат svg, и как он выглядит, Вы можете тут же увидеть, если откроете полученный файл в своём браузере.
________
8.3.2021

ДОПОЛНЕНИЕ

   После того, как я эту статью уже написал, и немного попрактиковался в технике оконтуривания сложной фигуры, я сообразил, что процесс можно существенно упростить. И в самом деле, если мы оконтуриваем некую область изнутри, то указываем на точку ВНУТРИ контура, и при окрашивании этой области делаем то же самое. А зачем нам делать дважды одно и то же?

   Этапы 4 и 5, о которых говорилось выше, мы вполне можем совместить.
   Конечно, этого нельзя делать, если мы оконтуриваем область ИЗВНЕ, иначе заливка у нас прольётся мимо. Также, как и нельзя окрашивать контур всей бабочки вначале, иначе закраска заслонит от нас те пятна, которые мы должны окрашивать позже. Поэтому мы должны ввести опцию, при которой этапы 4 и 5 объединяются, а в отсутствии которой, эти этапы проводятся раздельно.
   Для кнопки, вводящей эту опцию вполне подошёл переключатель «о/ф» на левой панели. Мы ставим его в положение «ф», кликаем внутреннюю кнопку области, выставляем размер точки (ширину линии контура), выставляем нужные нам цвет фона и цвет контура, на кнопке «Плотность» выставляем тип заливки – для маленьких пятен на крыльях бабочки тип заливки не очень важен, хотя тип 0 не создаёт заливки вовсе, и этим также можно пользоваться.
   Затем мы нажимаем клавишу «ё». Проверяем, как прошла трассировка – не пришлась ли она на дефект внутри пятна, и если всё в порядке – кликаем кнопку «закр». Чтобы увидеть результат, кликаем буквы «Ok» в третьей строке меню – этот клик нарисует тот графический элемент, который появился последним. Если нас увиденное почему-то не устраивает, то отменяем последнюю запись – кликаем строку «отмена».
А затем переходим к следующему пятну. Всё легко и просто.
   В момент оконтуривания с опцией «ф» координаты будущей точки заливки запоминаются, а в момент записи (тоже с опцией «ф») точка заливки помещается в титульную строку Ломаной линии.
   Всё описанное характерно только для Ломаной, получаемой методом трассировки, хотя клик по «Ok» работает и для других фигур. Кроме того, Ломанную можно впоследствии проредить, преобразовать её в многоугольник (и сделать затем обратное преобразование), скруглить углы многоугольника, и даже преобразовать скруглённый многоугольник в фигуру, составленную из кривых Безье. То есть, возможности тут большие.
__________