Отличительной особенностью той векторной графики, о которой я хочу рассказать, является исключительная простота и наглядность её численного представления, удобство редактирования, и связка с возможностью её анимации. Хранится графика в обычных текстовых файлах, которые можно открывать с помощью Блокнотика.
Вся графика находится в строках единого целочисленного массива, в его титульных и дополнительных строках. В таком же виде она представляется текстом. Благодаря тому, что числа целые, они легко читаются, и работать с ними можно не только методами редактирования, но и непосредственно – изменяя цифры в тех текстовых файлах, в которых графика хранится.
Все строки графического массива имеют одинаковую длину - в каждой содержится 12 целых чисел. В нулевой позиции титульной строки находится логотип графического элемента (примитива), а в нулевой позиции дополнительной строки находится ноль. Числом 0 помечаются также строки, не участвующие в построении графики, принадлежащие, например, удалённым ранее элементам.
МНОГОУГОЛЬНИК И ЛОМАНАЯ
Итак, вот пример титульной строки, описывающей многоугольник (см.иллюстрацию) –
1> 26 22 68 2 11 6 125 67 31744 32752 5
слева показан номер строки и значок >, указывающий на то, что строка титульная. Затем идут цифры, содержащиеся в строке. В последней, 11-й позиции строки находится ноль, и поэтому он не показывается.
Логотип многоугольника - 26 находится в нулевой позиции строки.
22 68 - это X,Y координаты начальной, нулевой точки многоугольника, держась за эту точку стилусом, мы можем перемещать его и вокруг этой точки поворачивать.
2 – ссылка на начало дополнительных строк
11 – число точек, находящихся там (число пар X,Y для этих точек)
6 – значение Плотности, это параметр, отвечающий за заливку
125 67 – координаты той точки, с которой начинается заливка
31744 32752 – цвет контура и цвет фона (цвет заливки)
5 – толщина контура в пикселях
Но давайте посмотрим на дополнительные строки, находящихся, как это вы уже поняли по ссылке, на строке с номером 2 и далее -
2 0 66 96 134 87 189 115 179 89 198 85
3 0 202 66 176 44 144 46 110 29 82 66
4 0 28 56 0 0 0 0 0 0 0 0
вот они, эти 11 точек, но последняя строка заполнена точками не полностью – пара нулей на месте координат тоже обозначают конец записи точек.
Координаты последней точки – 28 56, и эта точка будет соединена прямой с начальной точкой (22 68), поскольку такое действие предусмотрено алгоритмом обработки для логотипа 26. То есть, контур многоугольника у нас автоматически замкнётся.
Чего не будет сделано для контура Ломаной линии, имеющей логотип 29.
В остальном Многоугольник и Ломаная являются близнецами. Они различаются процессом создания – многоугольник создаётся путём рисования своих сторон. Рисование ведётся прямыми линиями, причём, линии эти в процессе рисования прилипают одна к другой, образуя неразрывный угловатый контур. Ломаная рисуется иначе – мы просто ведём стилусом по планшету так, как мы того хотим, и точки одна за другой появляются в быстром темпе.
Ясно, что при таком способе рисования точек появляется очень много, значительно больше, чем в многоугольнике. Однако с этим компьютер вполне справляется. Скорость появления точек можно замедлить, если реагировать не на каждую смену пикселя, а делать это через раз, через два или через три. И такая возможность в программе есть – цифры 1, 2 или 3 можно выставить на кнопке «разрежение следа».
Кроме того, разредить точки, уменьшив их количество в многоугольнике или в Ломаной вдвое, можно и после создания этих фигур. Для многоугольника это, положим, не актуально, а для ломаной применяется очень часто, поскольку этим и память экономится и работа по коррекции контура упрощается.
В численном представлении дополнительные строки Ломаной отличаются тем, что координаты точек в них увеличены в 10 раз. Сделано это для того, чтобы улучшить точность фиксации расстояний до одной десятой пикселя. Иначе, при небольших различиях в положениях точек, точки Ломаной в результате многократных округлений до целых чисел начинают разбалтываться, линия теряет изначально гладкий вид и становится заметно шероховатой.
Таковы особенности векторной графики в целых числах. В результате многократных преобразований контуры фигур чуть-чуть меняются. Изменения эти практически незаметны, а для целей анимации даже желательны. Целям анимации также очень подходит и то, что при увеличении или уменьшении размера фигуры, толщина её контурной линии не меняется. Контур рисуется тем размером, который указан в позиции 10 в титульной строке. Он имеет толщину 1-9 пикселей, если на иное не указывается особо.
Поэтому, если в позиции 10 титульной строки Многоугольника стоит число 15, а не цифра 5, то это не значит, что обводка будет такой толщины. Нет, контур будет иметь толщину 5 пикселей, но вид многоугольника существенно изменится – все его углы будут скруглены.
И это ещё одно преимущество использования в графике целых чисел – десятичные позиции такого числа иногда могут использоваться для численных указаний по отдельности.
Аналогичная ситуация с поз.5 титульной строки для Многоугольника или Ломаной – число, указывающее на заливку, в первом разряде указывает на её вид, а во втором – на её тип. В результате, возможности для заливки становятся весьма разнообразными - http://youtu.be/bhkaZ-mJAC0
Ломаная линия привлекательна простотой своего создания - её можно не только чертить свободным движением стилуса, но и получать как контур, путём автоматической обрисовки силуэта. Та ломаная, которую вы видите на иллюстрации, содержит 2359 точек, и такое количество точек нисколько не мешает ей при редактировании перемещаться онлайн, следуя движению кончика стилуса по планшету.
Ломаная линия превращается в многоугольник, если нажать клавишу «h» и подтвердить это действие кликом по информационной текстовой строке. Обратное превращение для многоугольника с острыми углами делается этой же клавишей.
КРИВАЯ БЕЗЬЕ
Посмотрим теперь на численное представление кривой Безье, которая находится на иллюстрации ниже многоугольника -
5> 31 51 143 6 9 0 0 0 28 703 5
6 0 51 143 94 194 144 88 178 141 28 -59
Поскольку кривая Безье (логотип 31) содержит только одну дополнительную строку, то позиция для числа элементов используется по другому – здесь стоит число 9, что указывает на тип кривой – она заострена с обоих концов. Здесь может стоять цифра 7 или 8, указывая на другие типы (одностороннее заострение), или число 0 – тип обычный. При Плотности 1-6 (следующая позиция титульной строки) изгибы кривой (см.иллюстрацию ниже) заполняются цветом фона, как того требуют стандарты векторной графики.
Но заострение, это нестандартная вещь.
Так же необычно используется поз.6 титульной строки. Если вместо ноля там поставить 1 – 5, то кривая будет нарисована цветом фона, а вокруг её появится окантовка соответствующей толщины (см. третью кривую на иллюстрации). Цифра эта берётся с кнопочки под кнопкой «Плотность» при установке новых значений параметров.
Цвет контура, его толщина и тип кривой дублируются числами 28 -59 в 9-й и 10-й позициях дополнительной строки. Такое дублирование удобно, когда несколько строк собираются в общую фигуру - такое связывание строк можно сделать, кликнув J (join) на строке меню редактора.
ФИГУРА БЕЗЬЕ
Как вы поняли, фигура Безье может получиться у нас нестандартная – кривые, составляющие её, идут не по порядку, некоторые кривые находятся внутри контура или даже вне его. Контур не обязательно будет замкнут, и тогда его заливка прольётся наружу, поэтому замкнутостью контура нужно специально озаботиться.
Фактически фигура Безье является контейнером дополнительных строк, описывающих отдельные кривые, и каждая из этих кривых может быть достаточно индивидуальна. Открыв файл с фигурой Безье в Блокнотике, мы совершенно спокойно можем переставлять её строки, добиваясь того, чтобы в процессе рисования кривые в должной последовательности перекрывали друг друга. Так, как мы это видим на иллюстрации.
Я использую три разновидности фигур Безье – с логотипами 38, 36 и 37.
38 – это чистая фигура-контейнер, цветом она не заполняется, хотя входящие в неё кривые могут иметь заполнение фоном своих изгибов. Заполняются изгибы в той же последовательности, в какой чертятся кривые, и их конфигурацию можно подгадать таким образом, чтобы даже довольно сложный контур заполнялся цветом целиком.
Для фигуры 36 ничего подгадывать не нужно. Не нужно также заботиться о том, чтобы контур её был замкнутым. Дело в том, что она заполняется цветом не методом заливки, а зачерчиванием – лучи, создающие зачерчивание, расходятся из начальной точки, достигают своих кривых и там кончаются. И лучи эти для каждой кривой могут иметь свой собственный цвет. А все вместе они могут быть тонкими прямыми, пунктирами или штрих-пунктирами, и в просветах между этими тонкими линиями будет просвечивать предыдущая графика (тонкие линии появляются при Плотности 1-5). И это вы также можете видеть на иллюстрации.
Фигура 37 заполняется заливкой. Для неё одной предусмотрены особые типы кривых, изображающие глаза и рот. Вот так выглядит графика фигуры 37 с иллюстрации –
18> 37 459 217 19 5 49 492 297 20000 703 2
22 0 464 331 480 341 504 338 524 323 31 -93
23 0 467 280 467 280 511 278 506 278 351 -92
19 0 459 217 357 315 539 148 549 261 7399 -98
20 0 549 261 549 261 582 381 496 383 15377 -97
21 0 496 383 464 401 367 291 459 217 0 0
Заливка ведётся цветом 703, то есть, того жёлтенького цвета, который мы видим на кривой Безье. Но больше в ней цвета 20000 – синего, и розового, поскольку таковыми выбраны тип (кнопка «Плотность») и фактура заливки (маленькая кнопочка ниже). На кнопке и кнопочке стояли цифры 9 и 4, из них и сложилось число 49, которое мы видим в поз.5 титульной строки. С помощью этих двух кнопочек и были сделаны многообразные заливки, на которые можно посмотреть, если пройти по ссылке в начале этой статьи.
Свои особенности можно видеть на последней позиции 4-х дополнительных строк. Пятая, 21-я строка особенностей не имеет – нули в её конечных позициях означает, что цвет контура и цвет фона сегмента определяется по титульной строке, причём цвет фона вообще значения не имеет, разве что ноль в поз.10 можно поставить именно для того, чтобы убрать из сегмента его особенность.
Особенности сегментов на строках 19 и 20 нам известны по кривым Безье: числа -98 и -97 описывают кривые самой большой толщины (девять) типа 8 (очень толстая) и 7 (умерено толстая), которые «заострены» на одном из своих концов. Относительно -98 слово «заострено», как вы можете видеть, не очень подходит, поскольку эта кривая изображает пышную причёску, или огромную шляпу. На соседней фигуре подобная кривая изображает ножку гриба.
Сегмент с числом -93 на строке 22 изображает рот с губами цвета 31 (красный) в наибольшей стадии раскрытия. По мере уменьшения цифры 9 рот будет постепенно закрываться.
Сегмент с числом -92 на строке 22 изображает глаза с большими (девять) зрачками и с радужкой цвета 351 (карие). Число -91 изобразило бы такие же глаза, но без радужки. Положение глазных яблок привязано к 1-й и 4-й точкам Безье, а положение радужки со зрачками – ко 2-й и 3-й. Таким образом, глазами персонажа можно легко управлять.
Поставим число -90, и глаз видно не будет. Не то, что они закроются, они просто не будут рисоваться. Так можно делать сегменты невидимыми, оставляя их, тем не менее, в составе фигуры.
Клавиша «J» верхнего регистра действительно удалит текущий сегмент из фигуры, а клавиша «j» нижнего регистра присоединит к фигуре Безье одиночную кривую с той строки, номер которой указан в текстовом поле выше кнопки «Paste».
РЕДАКТИРОВАНИЕ КОНТУРА И ПРЕОБРАЗОВАНИЯ *
В режиме редактирования передвигаться по сегментам фигуры или по точкам Ломаной или Многоугольника можно с использованием клавиш < и >. Выбрав сегмент, мы можем передвигать его точки. Делается это клавишами со стрелочками в правой части клавиатуры компьютера, нажимаемыми на нижнем или на верхнем регистре в зависимости от той точки, которую мы двигаем.
Для сегмента фигуры Безье при этом меняется форма кривой, или перемещаются её края. Переход к редактированию краёв делается нажатием < или > на верхнем регистре. Нажатие на «Пробел» закрепит сделанные изменения.
Используя клавиши f g h можно преобразовывать фигуры 36, 37 и 38 друг в друга. С помощью клавиш F G верхнего регистра можно, одновременно с преобразованием, указывать новую точку для начала заполнения фигуры цветом.
Если выбран Многоугольник 26, то клавиша «h», нажатая на нижнем регистре, преобразует его в фигуру Безье с логотипом 37.
Выбранная Фигура 36, 37 или 38 разбивается на одиночные кривые Безье кликом по букве «J» в строке меню редактора (старая фигура при этом не удаляется). А если выбрана кривая Безье (логотип 31), то она, и последующие за ней кривые, включаются в фигуру 38, которая создаётся вместо одиночных кривых.
Таким образом, как вы видите, редактором предоставляются большие возможности для изменения графических элементов, и благодаря целочисленному представлению графики, все изменения тут же легко контролируются. Достаточно кликнуть строку меню «просмотр», и графику в численном виде вы можете увидеть в появившемся окне.
_____________
* В дополнение к описанным возможностям редактирования позднее был добавлен способ массового перемещения точек (см. http://proza.ru/2021/03/27/1570 ). Этот способ применим практически ко всем фигурам векторной графики, за исключением Паттерна и Пата ( http://proza.ru/2020/12/30/1544 ).
ВЕЕР
Фигура 25 делается прямыми линиями, наподобие Ломаной, однако, начиная с точки 1-5 линии перестают следовать друг за дружкой, а расходятся веером. Вот так веер изображает левую ручку гриба -
13> 25 360 203 14 5 4 1 0 9462 6710 5
14 0 407 227 405 259 420 262 428 254 431 245
вслед за ссылкой 14 и числом точек 5 в титульной строке стоит число 4. Такой толщиной цветом фона 6710 прочерчивается середина ручек. Но прежде этого ручки чертятся толщиной 5*2-1 (пять берётся с позиции 10 титульной строки). Таким способом ручки получают окантовку.
Заливки не делается, на позиции 6 титульной строки мы видим число 1 – это та точка, от которой пальцы расходятся веером. Поставим на это место ноль - пальцы станут очень длинными и прирастут к плечам.
Используя клавиши < и > выбираем нужную точку, и пожалуйста – рука шевелит своими пальцами.
Создаётся и редактируется веер также, как Ломаная. На число 4 указывает кнопка «Плотность», а на число 1 – маленькая кнопочка снизу.
Так же как и в Многоугольнике, и в Ломаной, выбранная точка может быть удалена нажатием на клавишу «ъ», а клавиша «Ъ» верхнего регистра добавит точку в контур. Нажатие на «End» уменьшает количество точек вдвое.
ПОЛИЛИНИЯ
Элемент 27 – Полилиния, чертится подобно многоугольнику, только каждая начерченная сторона не прилипает к предыдущей стороне, а соединяется с ней, образуя каждый раз ещё одну дополнительную линию.
В численном представлении точки Полилинии группируются по 4 точки в строку. Поэтому на поз.9 и поз.10 строки образуются информативно свободные места, при создании Полилинии заполняемые нулями. Так же, как и для Безье фигуры 36, строкам Полилинии можно придавать индивидуальные цвета, выбрав одну из точек и нажав клавишу «End» на верхнем регистре Эта же клавиша, нажатая на нижнем регистре, демонстрирует индивидуальные цвета (или общие цвета, если в поз.9,10 стоят нули). А вот клавиша Ъ для Полилинии не работает.
При значении Плотности 0 (поз.5 титульной строки) Полилиния цветом не заполняется. Не чертятся также отрезки между точками 0-1 и 1-2.
При Плотности 1-5 Полилиния зачерчивается тонкими линиями, пунктиром или штрих-пунктирами, идущими от точки 1 к её сторонам. Таким образом, отдельного указания точки зачерчивания для Полилинии не требуется. Начальная, нулевая точка, может быть разъединена с первой и перенесена в любое удобное место.
При Плотности 6 Полилиния зачерчивается «сплошняком», окрашиваясь отдельно по сегментам из четырёх точек (см.иллюстрацию), а при бОльшей плотности виден только её однотонный скелет-контур.
В Полилинию нельзя добавлять точки, или удалять точки из неё. Их можно только перемещать.
КРУГ, ПРЯМОУГОЛЬНИК и ЛИНИЯ
Эти примитивы не имеют дополнительных строк. Вся информация помещается в одну титульную строку –
2> 14 218 226 40 2 6 0 0 28 703 5 круг
40 – радиус круга, число 2 в поз.4 связано с цифрой на кнопке «Разрежение следа», число это регулирует расстояние между кругами заполнения.
6 в поз.5 (и больше) – Плотность, заполнение не то, чтобы «сплошняком», но кругами с толщиной контура взятой от поз.10 (в нашем примере это 5).
При Плотности 0 заполнение круга не проводится,
При Плотности 1-5 делается «просвечивающее» заполнение кружочками из тонких линий, пунктиров или штрих-пунктиров.
В режиме Показа, нажимая клавишу ъ, выбранную окружность можно сделать похожей на глаз, снабдив её чёрным зрачком и веком, а клавишей Ъ верх.рег. добавлять и убирать нижнее веко, окрашенное в цвет фона.
Наличие зрачка и века показывается числом в поз.6 титульной строки, причём, число 3 устанавливает веко по центру, числа 4 и 5 сдвигают веко вправо, а числа 2 и 3 сдвигают его влево.
Цвет нижнего века обычно берётся под цвет щеки и используется для прикрытия снизу белка глаза. Цвет нижнего века находится в поз.7 титульной строки. При нуле в этй позиции нижнее веко отсутствует.
Без верхнего века с нижним можно сделать кружочек, похожий на нос.
Клавиша h нижн.рег. превратит круг в правильный Многоугольник - в текстовом поле над кнопкой «Paste» нужно задать число точек на его периметре.
Клавиша f нижн.рег. сделает круг невидимым, создав из него пустую марку. Клавиша g нижн.рег. вернёт кругу видимость. Пустая марка используется для совместного движения графических элементов в группе, например, для вращения их вокруг неё.
3> 13 192 328 246 371 4 0 0 20000 10143 5 прям-к
4 в поз.5, после координат противоположных углов прямоугольника, означает Плотность. При нуле в этой позиции контур прямоугольника цветом не заполняется, при Плотности 6 и более, прямоугольник заполняется фоном полностью, а при значениях 1-5 его заполнение делается просвечивающим, меняющимся случайным образом.
Единица в разряде десятков у числа, означающего Плотность, создаёт опцию, устраняющую случайность просвечивающего заполнения.
Синтаксическим двойником прямоугольника является «Пат» - элемент, использующий растровое изображение, хранящееся в файле. «Пат» имеет логотип 12, а в 6-й позиции его титульной строки находится число, указывающее на название файла.
3> 12 192 328 246 371 2 1005 0 20000 10143 5 Пат
Элемент «Пат», делается так же, как прямоугольник, то есть, кликом по кнопке Fill при Градиенте 6. На кнопках-компонентах цвета верхней панели должен быть выставлен номер файла, хранящего изображение Пата. Например, числу 005 на кнопках соответствует файл pat 1005.bmp и файл pat 1005m.bmp - первый содержит изображение на белом (прозрачном) фоне, а второй (того же размера)- чёрный силуэт (маску) этого изображения тоже на белом фоне. Силуэт приготовляется из изображения заливкой с опцией # на кнопке цвета. Паты должны находиться в папке APat текущего каталога.
При Плотности 0 Пат рисуется в натуральную величину, причём, центр его находится в центре связанного с Патом прямоугольника. При Плотности 1 размер поля прямоугольника, заменяющего Пат при перемещениях, подгоняется под натуральный размер Пата. Для иных значений изображение, считанное с Пата, подгоняется под размер прямоугольника (отдельно по X и Y).
То, как именно рисуется Пат, зависит от числа, стоящего в 5-й позиции строки. Число это равно цифре на кнопке «Плотность» и устанавливается вместе с цветом контура, цветом фона и толщиной контура по общему правилу – нужно выбрать элемент, кликнув строку «Параметры», проверить их, затем изменить и, переведя предохранитель из положения «о» в положение «ф», установить новые значения параметров кликом по кнопке «закрепить». И не забудьте потом вернуть предохранитель в его исходное состояние,
Плотность 3,7,9 отразит Пат слева-направо, 4 - сверху-вниз, 5 – сделает то и другое сразу. Плотности 6,7 создают окрашенное изображение, цвета которого контрастируют с установленным цветом фона и зависят от него. При цифрах 8,9 окрашенный под цвет фона Пат помещается на контрастное поле.
Если на маленькой кнопочке ниже, при Плотности равной 6 или 7, стоит цифра 1-5, то это опция сдвига, вносящего вертикальную графику в окрашенное изображение.
Пат отображается особо, если для него установлен большой размер точки рисования. При размере точки 9 (поз.10 строки) изображение Пата увеличивается в 2 раза.
Размер точки 8 позволяет создавать большие прозрачные изображения, для которых Силуэт не нужен. Ориентацию изображения задаёт кнопка «Плотность», а его характер зависит от цифры на кнопочке ниже и от цвета фона. При Плотности 8,9 большое изображение непрозрачно, но его цвет зависит от цвета фона. А при Плотности 6,7 маленькая кнопочка снизу позволяет регулировать поперечный контрастный сдвиг.
4> 22 364 90 437 41 6 0 0 28 703 5 линия
Здесь никакие комментарии не нужны. Число 6, означающее плотность, никакого значения не имеет. Но это пока. Возможно, что используя три пустые информационные позиции для этой прямой, я захочу сделать из неё что-нибудь вроде фрактала.
ПАТТЕРН
Хотя Паттерн (логотип 16) и назван графическим примитивом, но фактически он основан на копировании растрового изображения. Правда, копирование это осуществляется особым образом – копию растра можно перемещать, поворачивать и изменять в масштабе, точно так же как любой элемент векторной графики. Паттерн можно отражать слева направо и сверху вниз, и даже изгибать теми же стрелочками, которыми мы гнули кривую Безье. Так вполне можно сделать анимацию рыбы, которая плывёт, виляя своим хвостом.
Между тем, описание Паттерна умещается в одну титульную строку -
1> 16 661 89 0 -75 580 -100 70 28 5050 1
здесь, как всегда, 661 89 – координаты начальной точки, и далее идут координаты центра паттерна относительно начальной точки (0 -75).
Поз.5 – масштаб, с которым воспроизводится паттерн, увеличенный в тысячу раз. То есть, рыба у нас уменьшена, её масштаб – 0.58.
Поз.6 – угол поворота, увеличенный в десять раз. Рыба повёрнута на 10 градусов против часовой стрелки.
70 – номер поля листа паттернов, того поля, на котором в виде растра изображена рыба. Паттерны небольшого размера (100х100) идут на листе в шесть рядов (от 1 до 6) и в 10 столбцов (от 0 до 9). На листе имеется также три больших паттерна (200х200) с номерами 70, 80 и 90.
28 – активный цвет (здесь - красный). Это цвет, которым рисуется «ножка» паттерна – линия, соединяющая начальную точку и центр паттерна. При перемещении паттерна показывается только его «ножка», и не на всяком фоне она видна, поэтому и создана возможность окрашивать «ножку» в тот цвет, который удобен.
5050 – фактор изгиба паттерна по X и Y. Числа эти меняются от 01 и до 99, если бы наша рыба чуть вильнула хвостом, фактор мог бы быть 5056.
Перед фактором 5050 цифры нет, это значит, что паттерны берутся с нулевого Листа. Выставив 1 на кнопке Плотность, и запомнив это значение, можно перейти на первый Лист, и брать паттерны с него. Тогда впереди фактора изгиба появится единица, и он будет выглядеть так – 15050.
Разумеется, листы с паттернами просто так, ниоткуда, не берутся, в программу их нужно загружать. Паттерны приготовляются в виде рисунков формата bmp, а загружаются в программу так же, как загружается фактурный фон, предназначенный для рисования некоторыми кистями.
1 на поз.10 – это не размер контура, это признак того, что рыба отражена слева направо. Неотражённый паттерн имеет на этой позиции 3 (если 2, то рыба отражена сверху вниз, 4 – отражена по двум координатам одновременно).
В поз.10 может быть и число, большее десяти. Количество десятков при установлении новых параметров берётся с кнопочки под кнопкой «Плотность». И в этом случае паттерн рисуется как ПРОЗРАЧНЫЙ предмет, коэффициент преломления которого зависит от числа десятков (от 1 до 5), а направление преломления по X задаётся соотношением красной и зелёной компонент цвета точки на паттерне, и направление преломления по Y задаётся соотношением синей и зелёной компонент для этой же точки. Естественно, что в таком преломлении будет виден только общий фон вместе с теми графическими элементами, которые были выведены на рисунок прежде вывода прозрачного паттерна.
ПЕРЕМЕЩЕНИЕ ПРИМИТИВОВ ГРУППАМИ
Если число, находящееся на позиции 11 титульной строки, равно нулю, то оно не показывается в распечатке. В остальных случаях оно показывается и предваряется значком «решётки», например, вот так –
#7581 это означает, что элемент включён в первую группу
восьмого десятка, семьдесят пятой сотни.
Если ластик на левой панели не активирован, то есть, его кнопка имеет слегка светло-серый цвет, тогда этот элемент перемещается индивидуально.
При сиреневом ластике одновременно с его перемещением будут перемещены все элементы, имеющие такой же номер - #7581. При этом, что касается поворота и масштабирования, то за основу будет взята начальная точка выбранного элемента – именно того, который мы собственно и перемещаем.
При синем ластике будут перемещены ВСЕ элементы, входящие в восьмой десяток семьдесят пятой сотни. А если ластик розовый, то перемещается вся семьдесят пятая сотня целиком.
Как легко догадаться, элементы не включённые ни в какую группу, то есть, имеющие нулевые номера, перемещаются все вместе при любом цвете ластика, кроме светло-серого, разумеется.
Нажатием на клавишу «Esc» номер выбранного элемента делается отрицательным, а сам он – невидимым и не перемещаемым. Нажатие на «Esc» на верхнем регистре приводят все отрицательные номера к их обычному виду.
КООРДИНАТЫ и ЦВЕТ В ЦЕЛЫХ ЧИСЛАХ
Целые числа обозначаются как тип словом Integer, и занимают 8 байт или 16 бит. Поскольку старший, шестнадцатый бит числа отводится под знак, то положительное целое число, которое мы можем употребить в программе, ограничено 15-ю битами, и наибольшее число это 32767.
Вы помните, что в Ломаной линии у нас координаты точек, хранящиеся в целочисленном массиве, увеличены в 10 раз?
Вот-вот. Мы работаем с векторной графикой на поле стандартного формата – во весь экран ноутбука, и кликом по правому краю этого поля легко проверить, что координата Х на этом краю равна 1222.
Но что будет, если вы захотите сделать какую-нибудь безумную графику, или снять мультфильм с высоким разрешением, и для этого увеличите размер поля в 2.68 раза?
Пожалуйста – увеличивайте ваше поле хоть в 26 раз, и рисовать кистями вы на нём сможете, и элементами векторной графики пользоваться. Всеми, кроме Ломаной. Как только вы подведёте Ломаную к правому краю поля, увеличенного в 2.68 раза, вы увидите окошечко с надписью «overflow», и ваша программа закончит свою работу.
Не заходите так далеко. Поля, увеличенного в 2.5 раза, вам вполне хватит. Тем более, что смена кадров мультфильма на большом поле идёт медленнее. Да и с графикой работать на нём сложнее.
Второй нюанс, это представление цвета, в стандартной системе RGB требующего 3 х 8 = 24 бит, что меньше размера 15 бит, предоставляемого для целого числа.
Поэтому приходится обрезать младшие биты каждого компонента цвета, делая пять вместо восьми и получая тогда желанные 3 х 5 = 15.
Это делается специальными подпрограммами, переводящими цвет от одного представления в другое. Делается это очень быстро, а цветопередача с использованием целочисленного 15-битного представления практически не меняется.
К примеру с красной кривой Безье на иллюстрации – её красный цвет 28 взят с палитры, находящейся на левой панели программы. Этот естественный красный цвет потерял третий бит, и соответствует значению 224 по RGB классификации. В векторной графике красный цвет может быть и более ярким – самый яркий красный 31 в 15-битном представлении, это 248 по RGB.
Предыдущий - 30, это 240. Округление цвета в пределах плюс-минус 4 бита по RGB ощущается очень слабо.
РЕЗЮМЕ
Мы с вами прошлись по всем примитивам, и вы видите, разгадывать тонкости векторной графики по целым числам совсем не сложно. Более того, обращаясь непосредственно к численной записи, начинаешь понимать, каким способом ты векторной графикой управляешь. А это интересно с познавательной точки зрения и полезно практически.
В настоящее время существует много форматов для представления векторной графики. Почти каждый редактор имеет свой собственный формат. Это, с одной стороны, не очень хорошо, а, с другой стороны, показывает, что процесс выбора оптимального стандарта всё ещё не завершен.
Формат целых чисел (4 байта) в этом плане оказывается наиболее простым, компактным, и во многих отношениях удобным.
__________
22.12.2020