Когда делаешь что-то, то очень интересно знать, что происходит в смежных областях. Вот и мне стало любопытно. А как там векторная графика поживает? - таким вопросом я задался, когда уже практически закончил свой редактор для художественного рисования.
Простенькая векторная графика в моём редакторе была бы кстати – в редакторе есть возможности для анимации, и векторные персонажи для этого подошли бы. Правда, опыта у меня именно в векторном рисовании нет, но программирую я неплохо.
Всякий новый компьютерный проект, или новое его развитие, требует двух вещей – хорошего и продуманного структурирования, и предельной простоты работы с ним пользователя. Следуя второму принципу я постарался избавиться от лишних указаний на поле рисунка в виде кнопок, рычагов и полей, управляющих процессом создания векторной графики. Всё, что Вы видите на рисунке, это небольшая панель со строками команд и кружочки меток.
По такому кружочку можно кликнуть правой кнопкой стилуса один или несколько раз, выбрав нужный элемент графики, а затем тащить этот элемент в нужное место, или поворачивать его, двигая меленький квадратик, который путешествует вместе с элементом, находясь правее его. Приближая квадратик к той точке, за которую мы его двигали, мы уменьшаем элемент, а удаляя квадратик, мы наш элемент увеличиваем.
Картинка эта показана на рисунке со стрекозой. Маленький глазик у стрекозы это вовсе не глазик, а метка, за которую стрекозу можно двигать. Правее стрекозы виден и квадратик, он нужен для поворота.
Поставив стрекозу на новое место и ориентировав её так, как нужно, мы кликаем по жёлтой кнопке «закрепить» и записываем новые координаты нашей стрекозы. Кликаем стилусом по свободному полю рисунка, метки исчезают, и можно записывать очередной кадр анимации.
Интересно, что поскольку при изменении размера перемещаемой фигуры, меняется именно её размер, а толщины линий и точек остаются прежними, то в ходе этого процесса фигура как бы оживает – персонаж начинает подмигивать глазами и шевелить губами, как бы произнося какие-то слова.
Накладывая отдельно сделанные черты лица на овал лица, сделанного в виде фигуры из двух кривых Безье, и слегка двигая то и другое, можно добиться очень оживлённой мимики - http://stihi.ru/2009/09/24/5790
Из четырёх заострённых кривых Безье сделана веточка, показанная на рисунке сверху. Листики имеют отдельные метки и перемещаются отдельно. Но их можно и связать между собой, создав комбинированную фигуру Безье, и тогда веточку можно перемещать целиком.
Из шести комбинированных фигур Безье рисовавшихся поверх старого карандашного рисунка, получился графический портрет, который неплохо смотрится не только в редакторе, но и в Гугл браузере – графика совместима с SVG стандартом и может быть выведена в файлы этого формата.
Одним словом, работая над этим проектом, я получил отличные результаты и несказанное удовольствие. По правде говоря, я такого даже и не ожидал. Теперь никакой CorelDraw мне не нужен.
Особенно мне нравится рисовать заострённую кривую Безье – она изгибается под стилусом как неубиваемый червячок, и выйти из этого режима можно только двумя путями – или кликнуть кнопку «закрепить», или начать другие действия, нажав «сls».
Если в текстовом поле программы написать слово «лодка», то можно видеть принцип управления кривой Безье – кривую можно перемещать, таская её за концы, или изгибать, пользуясь как бы вёслами с уключинами – уключины закреплены в центре «лодки», концы вёсел – это 2-я и 3-я точки Безье, оттягивающие кривую на себя, а «рукоятки» вёсел, точки касания стилусом, находятся, аккурат, вблизи этой самой кривой. Грести вёслами в таких условиях очень удобно.
_________
5.07.2020
файл с текстом этой статьи находится тут - http://yadi.sk/i/hFGvBB57k6bHbw
___________________________
ПРИЛОЖЕНИЕ (для любопытных)
Вот в таком виде графика портрета хранится в формате программы -
X просмотр массива G 31-кр.Безье 36,38-Фигура Nстрок= 52
____ 13-Прям-к 14-Круг 22-Прямая 25-Веер 26-Мног-к 27-Полилиния ___
1> 36 291 284 2 5 0 296 273 0 12095 3 /портрет из 6-ти фигур Безье
2 0 291 284 284 289 256 269 249 266 0 0
3 0 249 266 238 236 262 125 264 126 0 0
4 0 264 126 265 123 278 84 278 84 0 0
5 0 278 84 278 84 281 106 281 106 0 0
6 0 281 106 281 106 287 108 287 108 0 0
7> 38 325 176 8 10 0 0 0 0 32767 3
8 0 325 176 324 256 368 284 371 284 0 32767
9 0 371 284 371 284 416 310 416 301 0 32767
10 0 414 302 416 301 425 300 416 287 0 32767
11 0 416 287 411 275 418 271 418 271 0 32767
12 0 417 270 412 268 418 266 407 264 0 32767
13 0 407 264 420 266 422 264 422 264 0 32767
14 0 422 264 424 250 425 243 425 243 0 32767
15 0 423 243 423 243 442 236 438 232 0 32767
16 0 438 232 426 226 422 188 427 189 0 32767
17 0 427 189 430 172 432 172 429 167 0 32767
18> 38 402 215 19 5 0 0 0 0 32767 3
19 0 402 215 418 206 415 160 417 164 0 32767
20 0 415 156 412 136 396 122 390 119 0 32767
21 0 421 187 423 189 415 187 415 187 0 32767
22 0 415 158 417 146 343 135 343 135 0 32767
23 0 343 135 333 134 319 146 319 146 0 32767
24> 36 416 162 25 6 3 400 164 0 32759 3
25 0 416 162 416 162 406 160 403 162 0 0
26 0 403 162 403 162 386 150 385 162 0 0
27 0 386 159 379 162 373 210 380 209 0 0
28 0 378 210 378 210 389 220 384 214 0 0
29 0 384 214 390 189 389 216 389 216 0 0
30 0 389 216 400 211 408 197 404 166 0 0
31> 38 391 185 32 12 0 0 0 0 32767 3
32 0 391 185 382 190 388 190 362 184 0 32767
33 0 364 184 364 184 344 178 356 173 0 32767
34 0 356 173 356 173 370 173 370 173 0 32767
35 0 370 173 370 173 366 178 371 184 0 32767
36 0 369 184 374 182 392 184 382 183 0 32767
37 0 381 178 376 187 396 168 391 175 0 32767
38 0 391 175 391 175 382 162 368 172 0 32767
39 0 368 172 361 164 318 167 318 167 0 32767
40 0 316 175 318 163 303 175 303 175 0 32767
41 0 303 175 300 180 305 217 305 217 0 32767
42 0 305 216 310 226 318 217 318 217 0 32767
43 0 369 170 369 170 384 174 380 177 0 32767
44> 36 273 184 45 8 0 403 59 0 12095 3
45 0 273 184 273 184 270 193 264 198 0 0
46 0 264 198 258 178 315 65 315 65 0 0
47 0 315 65 324 66 384 40 410 59 0 0
48 0 412 62 462 108 458 164 449 149 0 0
49 0 450 152 450 158 429 165 429 165 0 0
50 0 429 165 429 165 420 162 420 162 0 0
51 0 420 162 420 162 408 110 385 105 0 0
52 0 385 105 361 92 329 159 329 159 0 0
_______________________
А вот, как она выглядит в файле формата SVG -
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 291 284 c-7 5-35-15-42-18-11-30 13-141 15-140 1-3 14-42 14-42 0 0 3 22 3 22 0 0 6 2 6 2" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 200, 88)"/>
<path d="M 325 176 c-1 80 43 108 46 108" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 371 284 c 0 0 45 26 45 17" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 414 302 c 2-1 11-2 2-15" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 416 287 c-5-12 2-16 2-16" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 417 270 c-5-2 1-4-10-6" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 407 264 c 13 2 15 0 15 0" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 422 264 c 2-14 3-21 3-21" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 423 243 c 0 0 19-7 15-11" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 438 232 c-12-6-16-44-11-43" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 427 189 c 3-17 5-17 2-22" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 402 215 c 16-9 13-55 15-51" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 415 156 c-3-20-19-34-25-37" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 421 187 c 2 2-6 0-6 0" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 415 158 c 2-12-72-23-72-23" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 343 135 c-10-1-24 11-24 11" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 416 162 c 0 0-10-2-13 0 0 0-17-12-18 0-7 3-13 51-6 50 0 0 11 10 6 4 6-25 5 2 5 2 11-5 19-19 15-50" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 184, 248, 248)"/>
<path d="M 391 185 c-9 5-3 5-29-1" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 364 184 c 0 0-20-6-8-11" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 356 173 c 0 0 14 0 14 0" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 370 173 c 0 0-4 5 1 11" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 369 184 c 5-2 23 0 13-1" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 381 178 c-5 9 15-10 10-3" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 391 175 c 0 0-9-13-23-3" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 368 172 c-7-8-50-5-50-5" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 316 175 c 2-12-13 0-13 0" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 303 175 c-3 5 2 42 2 42" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 305 216 c 5 10 13 1 13 1" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 369 170 c 0 0 15 4 11 7" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 248, 248)"/>
<path d="M 273 184 c 0 0-3 9-9 14-6-20 51-133 51-133 9 1 69-25 95-6 50 46 46 102 37 87 0 6-21 13-21 13 0 0-9-3-9-3 0 0-12-52-35-57-24-13-56 54-56 54" stroke="rgb( 0, 0, 0)" stroke-width=" 3" fill="rgb( 248, 200, 88)"/>
</svg>
_____________
Векторная графика своими руками
© Copyright: Дмитрий Маштаков, 2020
Свидетельство о публикации №220070501276
Свидетельство о публикации №220070501276
Рецензии