Векторная графика своими руками

Геннадий Маков
    Когда делаешь что-то, то очень интересно знать, что происходит в смежных областях. Вот и мне стало любопытно. А как там векторная графика поживает?  - таким вопросом я задался, когда уже практически закончил свой редактор для художественного рисования.

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

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

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

   Интересно, что поскольку при изменении размера перемещаемой фигуры, меняется именно её размер, а толщины линий и точек остаются прежними, то в ходе этого процесса фигура как бы оживает – персонаж начинает подмигивать глазами и шевелить губами, как бы произнося какие-то слова.
   Накладывая отдельно сделанные черты лица на овал лица, сделанного в виде фигуры из двух кривых Безье, и слегка двигая то и другое, можно добиться очень оживлённой мимики - http://stihi.ru/2009/09/24/5790

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

   Одним словом, работая над этим проектом, я получил отличные результаты и несказанное удовольствие. По правде говоря, я такого даже и не ожидал. Теперь никакой CorelDraw мне не нужен.
   Особенно мне нравится рисовать заострённую кривую Безье – она изгибается под стилусом как неубиваемый червячок, и выйти из этого режима можно только двумя путями – или кликнуть кнопку «закрепить», или начать другие действия, нажав «сls». 
   Если в текстовом поле программы написать слово «лодка», то можно видеть принцип управления кривой Безье – кривую можно перемещать, таская её за концы, или изгибать, пользуясь как бы вёслами с уключинами – уключины закреплены в центре «лодки», концы вёсел – это 2-я и 3-я точки Безье, оттягивающие кривую на себя, а «рукоятки» вёсел, точки касания стилусом, находятся, аккурат, вблизи этой самой кривой. Грести вёслами в таких условиях очень удобно.
_________
5.07.2020

файл с текстом этой статьи находится тут - http://yadi.sk/i/hFGvBB57k6bHbw