Контуры в векторной графике. Коррекция. Алгоритмы

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

    ПРЕДСТАВЛЕНИЕ ВЕКТОРНЫХ ИЗОБРАЖЕНИЙ ЧИСЛАМИ

  В программе DM_Paint векторная графика находится в массиве Pvv(I,K).
Это массив целых чисел, в котором индекс I указывает на номер строки, а индекс K указывает на позицию в этой строке. Всего таких позиций в строке двенадцать – от К=0 до К=11.
  Строки, описывающие элементы векторной графики, разделяются на титульные и дополнительные. Титульная строка для каждого элемента одна единственная, она описывает основные свойства этого элемента, а дополнительных строк для некоторых элементов может и не быть. А если дополнительные строки есть, то идут они подряд, друг за другом, и на первую из этих строк в титульной строке на поз.3 даётся ссылка.
 
  В нулевой позиции титульной строки указывается логотип элемента. Например, Ломаная линия, представленная на иллюстрации рисунками 1-4, имеет логотип 29, а кривая Безье – логотип 31. В первой и во второй позициях титульной строки находятся X,Y – координаты начальной точки векторной фигуры, а в третьей, как уже говорилось, находится ссылка на начало дополнительных строк.
  Для ломаной, показанной на рис.1, заполнение массива выглядит так –

        1>     29  214  150  2  53  6  274  162  28  703  5 
   2      0  2140  1460  2150  1400  2200  1310  2230  1230  2290  1180
   3      0  2320  1130  2380  1100  2430  1080  2510  1070  2580  1030
   4      0  2650  1010  2720  1000  2780  1020  2820  1070  2880  1090
   5      0  2930  1110  2990  1130  3030  1160  3090  1190  3140  1230
   6      0  3170  1320  3200  1370  3250  1430  3260  1500  3270  1580
   7      0  3280  1640  3270  1710  3240  1790  3220  1850  3200  1900
   8      0  3150  1970  3100  2020  3040  2100  3010  2140  2960  2170
   9      0  2880  2200  2790  2220  2710  2240  2620  2240  2560  2230
   10      0  2490  2220  2430  2210  2380  2180  2330  2140  2290  2100
   11      0  2240  2040  2220  1990  2180  1950  2150  1910  2150  1840
   12      0  2130  1750  2120  1690  2120  1620  0  0  0  0

Видно, что дополнительные строки имеют в первой позиции нуль. Следом идут пары координат X,Y других точек контура (для повышения точности эти значения хранятся умноженными на десять), и таких пар (точек) у нашей ломаной 53 (это видно по значению 53 в поз.4 титульной строки. Последняя строка координатами заполнена частично, и в её последних позициях находятся нули.
  В 6-й, 7-й позициях титульной строки находятся координаты начальной точки заливки, далее – цвет заливки, цвет контура и толщина контура.
  Номер группы поз.11 равен нулю, и он в распечатке не показан.

Как вы поняли, тут показывается не сам массив, а его распечатка, и слева в распечатке идёт порядковый номер строки, то есть, индекс I.

     КАК РЕДАКТИРОВАТЬ КОНТУР

  Как редактировать контур? Ясно как – нужно менять должным образом числа в дополнительных строках и в позициях 1,2,6,7 титульной строки, если это потребуется. Но не будешь же менять числа вручную, хотя в принципе и это возможно - поскольку файлы, хранящие векторную графику, имеют текстовый формат, и в них находится именно эта самая распечатка, то их можно править прямо из Блокнотика.
  Конечно, вручную править цифры неудобно, и поэтому для редактирования контуров векторных фигур используются разные инструменты, методы и алгоритмы.

1. ИНДИВИДУАЛЬНЫЕ ПЕРЕМЕЩЕНИЯ ВЫБРАННЫХ ТОЧЕК

  Если известен порядковый номер точки, то отыскать для неё значения X,Y в массиве дополнительных строк, это дело техники. Обставлено это так – в режиме Показа мы кликаем правой кнопкой мыши, и на рисунке возникают кружочки, показывающие начальные точки графических фигур.
  Теперь кликаем (опять правой кнопкой) по одному из кружочков, и тем самым выбираем нужную фигуру. И если эта фигура имеет контур, то мы сразу попадаем на нулевую точку этого контура.
  Нулевую точку можно двигать – удерживая Shift и нажимая кнопки со стрелочками на клавиатуре компьютера. Этими же стрелочками, но без Shift,
передвигается точка заливки. Но можно отправиться и к другим точкам контура. Для этого мы используем клавиши > и <, а также соседние клавиши «?» и «М» латинское, для того, чтобы передвигаться по контуру быстро – на десять точек сразу.

  Дойдя до нужной точки, мы двигаем её клавишами со стрелочками. Величину подвижки можно регулировать кнопками, отмеченными буквой «w», на верхней панели. Чтобы посмотреть результат и очистить рисунок от лишних линий нажимаем «Пробел» или кликаем по кнопке «закр».

  Чтобы удалить точку, нажимаем клавишу «ъ», а чтобы вставить точку, нажимаем «Ъ» на верхнем регистре.

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

  Другой способ коррекции это сдвиг трёх точек сразу. Делается такой сдвиг всё теми же клавишами со стрелочками, нажимаемыми с удерживаемом Shift. А если активизировать опции кнопки «аа» на левой панели, то сдвигаться будут 5, 7 или 9 точек сразу. При этом крайние точки сдвинутся только на полшага, сохраняя таким образом плавность очертаний контура. Пример такого сдвига мы видим в нижней части контура рисунка 3.

  Третий вид коррекции это сглаживание контура в области, имеющей центром выбранную точку. Сглаживание делается нажатием на клавишу «end» (на нижнем регистре), а ширина области сглаживания регулируется опциями кнопки «аа». Сглаживание делается по следующему алгоритму –
1. Для каждой точки, принадлежащей сглаживаемой области, берутся её соседи, и определяются координаты точки, находящейся посредине между этими соседями.
2. Полученной точке придаётся вес пропорциональный значению цифры на кнопке  «w», и эта точка пододвигается к текущей.
3. Ширина области сглаживания составляет 9 точек и шире, в зависимости от опции кнопки «аа».
  Сглаживание практически сразу нивелирует выбросы индивидуальных точек, а сглаживание, последовательно проводимое в разных точках контура, позволяет сделать из него почти идеально гладкий круг, который можно видеть на рис.1 иллюстрации.

2. МАССОВЫЕ ПЕРЕМЕЩЕНИЯ ТОЧЕК

  Плавные изменения растровых изображений весьма эффективно делаются с применением конформной деформации. Слово «конформный» означает, что изображение преобразуется без разрывов между соседними его точками – соседние точки так и остаются соседними, изменяются только расстояния между ними.
  Практически этот метод реализуется «копированием круговых областей»  http://proza.ru/2019/10/20/1299  Суть копирования состоит в следующем – сперва копируется широкая круговая область с очень небольшим смещением. Затем, поверх этой области, копируется область меньшая с несколько большим смещением. И так раз пять или восемь, с постепенно сужающимися кругами. Процедура проходит быстро, однако мелкие детали, приходящиеся на края кругов, постепенно разрушаются. После нескольких копирований разрушаются и контуры фигур. Поэтому результаты растрового копирования приходится время от времени подправлять и подрисовывать.

  Этого недостатка нет, если перемещаются контуры векторной графики.
  Алгоритм перемещения контура векторной фигуры состоит в следующем –

1.   Касаемся стилусом планшета, обозначая начальную точку вектора переноса. Координаты этой точки запоминаются.
2.   Ведём стилус по планшету и отрываем его, обозначая тем самым
     конечную точку вектора переноса.   
3.   По значению цифры на кнопке «Градиент» определяется радиус окружности, описанной вокруг начальной точки – все точки, составляющие контур выбранной фигуры и попавшие в этот круг, будут перенесены.
4.   Но перенесены они будут не на одинаковое расстояние. Точки близкие к центру круга будут перенесены в соответствии с длиной вектора переноса, а точки, находящиеся на краю круга, сдвинутся совсем немного – зависимость выполаживается к краю пятна. Чтобы не вычислять коэффициенты сдвига каждый раз, они предварительно записываются в массив из 50-ти чисел (эта зависимость изображает Косинус на интервале от нуля до Пи, делёный на два, плюс 1/2).
 
  На рисунке 3 виден результат конформного переноса точек правой части контура векторной фигуры. Чтобы делать такие переносы нужно на кнопке опций рисования кистью (кнопка находится на левой панели) установить «зелёную» опцию. И кликнув ту часть контура, которую нужно тащить, протянуть невидимый вектор в ту точку, куда нужно тащить, и в этой точке отпустить левую кнопку мыши. Это действие можно тут же повторить. Контур векторной фигуры правится таким способом очень быстро.
  Ширина круга захвата и переноса точек регулируется цифрой на кнопке «Градиент». При цифре 0 редко расположенные точки можно передвигать поодиночке.

  Сглаживать контуры Ломаной и Многоугольника тоже можно с использованием «зелёной» опции. Контур из точек внутри установленного круга может быть сглажен простым касанием и отрыванием стилуса. И уже после этого осуществляется перенос точек, в зависимости от того, был ли стилус перемещён, или нет. Такой режим дополнительного сглаживания – режим зелёной «L», устанавливается кликом ПРАВОЙ кнопкой мыши по зелёной кнопке включённой опции переноса. Выход из режима – вторичный клик, или полный выход из «зелёной» опции.
  Сила сглаживания, так же, как и при сглаживании с выбором отдельной точки, регулируется цифрой над кнопочкой w на верхней панели.
 
  Даже не выходя из «зелёной» опции графику можно перемещать целиком, делается это с помощью кликов по панели перемещений, которая выдвигается слева на поле рисунка. Ластик, находящийся ниже этой панели, в зависимости от своего цвета позволяет корректировать и перемещать несколько графических элементов сразу. Например, сиреневый ластик связывает в этом отношении воедино все элементы, имеющие одинаковый номер группы. Возможности перемещений с одновременной коррекцией контуров в этом режиме колоссальные. Главное, ничего переключать не надо. Только кликаешь и таскаешь. 


3. ВИЗУАЛИЗАЦИЯ ТОЧЕК

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

  Оптимальный вариант – предоставлять вспомогательную графическую информацию по желанию пользователя, и только в тех случаях, когда это действительно бывает нужным. Кроме того, такая информация должна предоставляться быстро и легко – без залезания в пункты какого-нибудь меню и копания в нём. Более того, лишняя информация должна исчезать автоматически.
  Придайте своей программе черты искусственного интеллекта, пусть она помогает вам.

  При переходе из режима рисования в режим Показа, кружочки, показывающие начальные точки векторных фигур, возникают автоматически. Чтобы этот процесс происходил мгновенно, в программе, помимо массива Pvv(20000, 11), хранящего всю информацию о графике, предусмотрен массив Mvv(2000, 2), в котором находятся номера титульных строк элементов и X,Y координаты их начальных точек. Вот по этим координатам кружочки и рисуются.

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

  Как вы понимаете, такие перемещения рассчитаны на будущую анимацию, и потому эргономика работы с контуром очень важна.

  Далее, если кроме перемещения, мы хотим ещё и трансформировать контур в его отдельных местах (например, персонаж шагнул, а точки его опорной ноги остались на месте), то используя клавиши  < и >, мы входим в контур и передвигаем точки так, как хотим – вся коррекция видна на контуре, находящимся в новом положении.
  Однако, когда мы закрепим сделанные изменения клавишей «Пробел» или кнопкой «закр», то фигура будет залита краской, а прежней фигуры мы уже не увидим. То же относится и к способу конформной трансформации контура – сделанные этим способом изменения тут же закрепляются.
 
  Если же вам очень захочется видеть предыдущую графику под новыми её контурами, то перед исправлениями запомните её на поле6. И так, шаг за шагом, вы сможете последовательно двигаться со своей графикой от кадра к кадру. Перед запоминанием на поле6 изображение можно и ослабить, если считать на него из буфера Канвы равномерный фон с полупрозрачной опцией.

  О буфере Канвы рассказывается тут - http://proza.ru/2020/05/21/586
  Запись в этот буфер делается нажатием клавиши «k» латинское на нижнем регистре. Заполняете, например, весь рисунок белым цветом, но цвет на кнопке фона белым быть не должен - установите на этой кнопке серый цвет (тогда именно этот цвет будет считаться прозрачным при считывании). И только затем нажмите клавишу «k». Теперь в буфере у вас будет белый фон, который вы будете накладывать на свою графику.
  Наложение (считывание из буфера) делается нажатием клавиши «L» на верхнем регистре. Степень прозрачности налагаемого фона регулируется цифрой на кнопке «Плотность» (рекомендуемое значение – 6).
  Пример наложения новой графики на старое ослабленное изображение можно видеть на рисунке 5 сверху. Если более удобно смотреть не на залитую краской фигуру, а только на её контур, то закрепляйте графику с серой опцией (блокировка рисования и заливки) на кнопке левее панели переключений. Клик левой кнопкой мыши на ней включает и отключает режим блокировки, а клик правой конкой мыши – выставляет и убирает панель.

  Вернёмся к вопросу о демонстрации точек. Когда и зачем это нужно?
  Если мы хотим увидеть все точки выбранной фигуры сразу, то выставляем цвет, отличный от цвета контура, например, синий и нажимаем клавишу «N» на нижнем регистре. На контуре появляются синие точки. На кривых Безье и на фигурах, составленных из этих кривых, показываются и оттягивающие точки (см. рис.5 снизу), их тоже можно таскать, меняя тем самым кривизну сегментов Безье.

  Но, может быть, точки расположены по контуру неравномерно? Так, как на рисунке 3 иллюстрации. В некоторых случаях неравномерность расположения точек сильно мешает.
  Тогда нажимаем клавишу «N» на верхнем регистре. 
  В верхней информационной строке появляется вопрос «нормализовать? ДА». Мы кликаем по этой строке, подтверждая действие. Теперь на нашем контуре появляются равномерно расположенные точки, мы смотрим на них, и соображаем – а всё ли будет хорошо? Если да, то кликаем по строке «продолжить ДА» и преобразуем точки. Теперь они расположены на контуре равномерно (см. рис.4).

  Таким образом, программа DM_Paint предоставляет разнообразные инструменты и способы корректировки контуров векторных фигур. Эти способы просты, удобны, и вполне сочетаются с возможностью последующей анимации.
  Чего не скажешь о других, даже более навороченных программах.
  Скачать DM_Paint можно тут - http://disk.yandex.ru/d/suZ-qnFu4YOdYw

__________
27.03.2021