Кривые и фигуры Безье

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

   СОЗДАНИЕ КРИВЫХ И ФИГУР

  Кривые с логотипом 31 и фигуры Безье с логотипом 38 создаются в ходе обычного рисования, как его опции, при выборе определённого режима – над большой буквой «О» на левой панели мы устанавливаем режим «ППП» (рисование замкнутым веером), а слева от кнопки «Т/С/О/Р» устанавливаем жёлтый лайк с буквой «а» (рисование графических примитивов).
  Кроме того, для записи примитивов в общий массив графики, в котором они будут храниться, мы кликаем кнопку «графика» и затем – строку «Редактор», чтобы включить редактор графики. После этого для создания кривых и фигур Безье у нас всё готово.

  Устанавливаем цвета. Выбираем активный цвет (цвет абриса) и цвет фона (тот цвет, который будет заполнять сегменты кривой Безье). Кнопкой «Градиент» на левой панели устанавливаем тип кривой.
  Тип кривой указывает на характер заполнения (цветом фона, цветом абриса или без заполнения), а также на особенности начертания кривых в процессе их создания. Начертание всегда начинается с проведения прямой линии, затем, при типе кривой 0,1,3 в момент второго касания стилусом прямая изгибается по касательной к этой точке, и на кривой показываются начальная и конечная точки, коснувшись которых и ведя стилусом, кривую можно продолжать изгибать. А если коснуться поверхности планшета в стороне от этих точек, то созданная кривая автоматически запомнится, и начнётся создание следующей кривой. Такой способ начертания позволяет работать быстро, создавая из кривых подобие штриховки.
   Тип 4 аналогичен типу 3, только кривая изгибается не по касательной, а в сторону выбранной точки.
   Для типа 4,5,6 начальная и конечная точки не показываются, но коснувшись концов кривых, эти концы можно двигать, или, выбрав оттягивающую точку по принципу «какой конец ближе», двигать её, и так играть с кривой до бесконечности, то есть, до того момента, когда будет нажата кнопка «закрепить» или кнопка «cls». И только тогда можно будет начать начертание новой кривой.
   Разнообразные способы начертания кривых Безье позволяют выбирать наиболее подходящий и удобный для этого вариант. 

   Начертание с опцией 6 и цифрой 7,8 или 9 на кнопке «Плотность», позволяет создавать кривые Безье с заострением в конечной точке или на обоих концах. В остальных случаях значение Плотности определяет прозрачность заполнения, видимую в формате SVG в браузере, но не имеющую такого значения при работе внутри программы – среда Визуал Бейсик, в которой сделана программа, не поддерживает быструю реализацию прозрачности, также как и не поддерживает точечную заливку фигур цветом. Поэтому от таких вещей приходится отказаться.

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

   Начертание с опциями 7,8,9 происходит так же, как и для типа 4, однако, начерченные кривые автоматически примыкают друг к другу и сразу в массив графики не записываются. При нажатии на кнопку «Закрепить» не записывается и последняя, полученная в ходе начертания прямая, а все предыдущие кривые записываются и оформляются как фигура.

   Сравним запись одиночной кривой типа 4 с записью фигуры из трёх кривых типа 9 (эти графические элементы показаны на иллюстрации слева) –

        7>     31  207  164  8  0  0  0  0  28  703  5                кривая
   8      0  207  164  235  200  249  86  307  163  28  703

        25>     38  226  483  26  3  0  0  0  28  703  5            фигура
   26      0  226  483  226  483  263  449  295  469  0  0
   27      0  295  469  295  469  336  514  291  502  0  0
   28      0  291  502  291  502  225  506  246  489  0  0

 Здесь 38 – логотип фигуры Безье, далее следуют координаты начальной точки, 26 - ссылка на строку с координатами 4-х точек первой кривой Безье, 3 – число кривых в фигуре, 0 – плотность (нулевая плотность означает, что сегменты фигуры не заливаются)
28 – красный цвет, 703 – цвет фона, 5 - толщина абриса.
 Далее следуют строки с координатами кривых Безье.
_______
напомню, что кривая Безье задаётся четырьмя точками: 1-я - начальная, 4-я - конечная, 2-я и 3-я - оттягивающие.

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

  Передвигать и изменять очертания графических элементов Безье можно в режиме Показа. В этом режиме показываются начальные точки элементов, и кликая по ним ПРАВОЙ кнопкой мыши, можно выбрать нужный элемент.
  Затем, нажав ЛЕВУЮ кнопку мыши, перетаскивать элемент по рисунку.
  Поворачивать и изменять размер элемента можно, двигая появившуюся справа от него квадратную метку.
  Такую, перемещённую на новое место и увеличенную в размерах фигуру мы видим на иллюстрации справа вверху.

  Невзирая на то, что сегменты кривых в этой фигуре залиты, мы может залить, а точнее - зачертить всю фигуру целиком, создав веер лучей, расходящихся из одной точки.
  Для этого, предварительно закрепив фигуру на новом месте, кликаем по точке расхождения лучей ПРАВОЙ кнопкой мыши и нажимаем клавишу «F» на верхнем регистре. Фигура  меняет свой логотип, превращаясь в фигуру 36.

  Но почему наша фигура на иллюстрации оказалась зачерченной такими тонкими линиями? Это потому, что в момент нажатия клавиши «F» мы выставили значение Плотности = 0.
  При значениях 1,2,3,4 мы увидим другие типы тонких прямых – это будут пунктиры и штрих пунктиры.
  При других значениях на кнопке «Плотность» линии будут иметь толщину абриса и располагаться плотно. Таким образом, наша фигура будет как бы не зачерчена линиями, а залита выбранным в этот момент цветом фона.

  Нажав клавишу «f» на нижнем регистре, мы можем из фигуры 36 сделать фигуру 38. А нажимая клавишу «j», разбить фигуру 36 или 38 на отдельные кривые, и, выбрав первую из них, вновь соединить кривые в фигуру 38.
  Короче говоря, векторные объекты, связанные с кривыми Безье, мы можем перекраивать, как только захотим. И это удобно.

  Заменить какой либо объект тоже не составляет проблем – создадим новый объект, выделим старый и кликнем строку меню «…замена».
  Также очень удобно, выбрав фигуру, клавишами < и > передвигаться по её сегментам. Выделив сегмент, можно клавишами со стрелочками на клавиатуре компьютера передвигать оттягивающие точки кривой Безье, меняя тем самым её форму, а выделение сегмента клавишами < и > на верхнем регистре позволяет передвигать сегмент целиком, двигая парами его начальные или конечные точки (точки 1 и 2 или точки 3 и 4 в зависимости от регистра, на котором нажимаются клавиши со стрелками). Опыт показывает, что это действительно очень удобно и не составляет никаких проблем.
  Шаг перемещения точек регулируется и составляет от 1-го до 9-ти пикселей. Такое небольшое и тонко контролируемое перемещение очень подходит для постепенного изменения очертания фигуры при создании покадровой анимации.

  Обратите внимание на то, что в отличие от таких программ как Corel Draw или After Effects, в которых и перемещение графических объектов и корректировка их контуров делается с помощью мыши, для редактирования контуров в своей программе я намеренно применяю горячие клавиши, оставляя на мышь только перетаскивание графических объектов. Такое разделение функций между мышью и горячими клавишами принципиально, и не просто удобно, но и позволяет проводить оба процесса одновременно.
  Например, можно выделить на общем рисунке фигуру Безье, мышью отвести её в сторону, горячими клавишами скорректировать её форму, а затем мышью вернуть её на место.

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

__________
17.09.2020