Ломаная линия в векторной графике

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

  ЧИСЛЕННОЕ ПРЕДСТАВЛЕНИЕ ЛОМАНОЙ ЛИНИИ

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

    1>    29  573  171  2  709  6  570  185  20480  3644  1 
 2   0  5720  1731  5709  1750  5699  1770  5679  1791  5658  1801
 3   0  5639  1818  5620  1829  5598  1839  5578  1849  5559  1859
…
 143   0  5741  1630  5741  1650  5740  1670  5740  1689  0  0

  Число 29 в нулевой позиции титульной строки является логотипом Ломаной.
Следом идут координаты X и Y начальной точки Ломаной, далее – ссылка на начало вспомогательных строк и число точек, координаты которых указываются во вспомогательных строках.
  Если бы это число равнялось 710, то вспомогательные строки были бы заполнены полностью. Но поскольку число точек 709, то вместо координат последней точки указаны нули.
  Обратите внимание – числа во вспомогательных строках увеличены в 10 раз, и, как легко видеть, первая точка Ломаной почти совпадает с нулевой.
И другие точки в ломаной линии расположены близко друг к другу. Однако увеличение масштаба в 10 раз позволяет фиксировать их взаимное расположение с точностью до десятых долей пикселя, поэтому даже при многократных перемещениях этой векторной фигуры, вне зависимости от её масштаба, удаётся сохранить видимую гладкость линии. Разумеется, хранение информации о координатах точек не в целочисленной форме, а с большим количеством знаков, ещё более гарантировало бы сохранение форм ломаных фигур, но и четырёх значащих цифр, как показала практика, для целей анимации вполне достаточно.

  В поз.5 титульной строки стоит число 6. Эта цифра берётся с кнопки Плотность и обозначает вид заливки.
  Для цифры 6 заливка сплошная, а вот для цифры 3 заливка делается градиентной, с изменением цвета по горизонтали. Контур ломаной замыкается прямой, имеющей цвет фона, если расстояние между начальной и конечной точками велико, или прямой цвета контура, если зазор между этими точками мал. А вот многоугольник замыкается прямой цвета контура вне зависимости от величины зазора (см. иллюстрацию).

  В поз.6,7 титульной строки указаны координаты той точки, с которой начинается заливка. При создании Ломаной в этих позициях стоят нули, и только что созданная Ломаная цветом не заливается.
  Для того, чтобы сделать заливку мы переходим в режим Показа, выбираем нашу ломаную, кликаем левой кнопкой мыши по начальной точки заливки и нажимаем клавишу «G» на верхнем регистре. Точно так же осуществляется заливка всех векторных фигур, в том числе Многоугольника и фигуры Безье 37. Для фигуры Безье 36 используется клавиша «F», и эта фигура не заливается, а зачерчивается веером лучей, расходящихся из указанной точки.
  В поз.8,9 титульной строки указан цвет заливки (цвет фона) и цвет контура (активный цвет). В поз.10 титульной строки указана толщина линии контура.


  КАК СОЗДАЁТСЯ ЛОМАНАЯ ЛИНИЯ  120 – 40 – 25 - 18

  В программе DM_Paint ломаная линия записывается в режиме свободного рисования – опускаем стилус на планшет, ведём им, и в конце линии  – отрываем его от планшета. Этот способ создаёт много точек на траектории движения и отличается от рисования многоугольника, при котором каждая вершина многоугольника задаётся отдельным движением стилуса вдоль стороны с отрывом стилуса в точке каждой вершины.

  Существует два режима записи Ломаной – в первом, Ломаная сначала фиксируется, а после клика по кнопке «закрепить» - записывается в массив графики. Во втором режиме Ломанная записывается в массив графики автоматически – сразу после отрыва стилуса от поверхности планшета. Второй режим удобен для быстрого создания штриховок.

  Для того чтобы регулировать расстояние между точками при записи Ломаной используется кнопка «разрежение следа». Эта кнопка травянисто-зелёного находится на верхней панели. В зависимости от цифры на этой кнопке – 0, 1, 2 или 3, записанный отрезок Ломаной длиной 120 пикселей будет содержать те же 120 – 40 - 25 - 18 точек.
  Указанные цифры соответствуют рисованию с помощью тач-панели ноутбука. Движение стилуса по планшету создаёт число точек в два раза меньшее. Но так или иначе, плотность точек на Ломаной можно регулировать ещё на стадии её записи.

  СОЗДАНИЕ ЛОМАНОЙ МЕТОДОМ ТРАССИРОВКИ

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

  При обводке снаружи требуется, чтобы одинаковый цвет имели все пиксели, примыкающие к рисунку снаружи. Это требование может создать небольшие проблемы, если рисунок на белом фоне взят из интернета – вокруг такого рисунка обычно имеется незаметная кайма светлого тона и неравномерной окраски. Кайму светлого тона легко удалить, воспользовавшись кнопкой «У» на левой панели, или, что более радикально, проделав дискриминацию цвета рисунка http://proza.ru/2021/02/02/362. См.также http://youtu.be/3sDvIThGyoU и http://youtu.be/VehXORHLoXg

  Чтобы сделать обводку мы кликаем точку на поле однородного цвета внутри будущего контура или вне его, и нажимаем клавишу «ё», или «Ё» на верхнем регистре, чтобы указать, в какой стороне нужно искать контур – слева, или справа от этой точки. Интервал между точками обводки регулируется цифрой на кнопке «размер точки». Таким образом, на замкнутом контуре с общей длиной 240 пикселей может оказаться 120-60–40–30–25–21–18-16-14 точек.

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

  МАНИПУЛЯЦИИ С ГРАФИКОЙ В РЕЖИМЕ ПОКАЗА

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

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

  Так, витраж на иллюстрации составлен из четырёх Ломаных, которые получены путём отражения относительно начальной точки, расположенной в центре витража. Начальные точки этих Ломаных совпадают, а контуры причудливым образом пересекаются, образуя симметричный узор.
  Что касается заливки, то она для ломаных не делается, но четыре угловые области заливаются цветом отдельно. Для этого на них помещаются небольшие круги нужного цвета. Клавиша «f» нижн.рег. делает круг невидимым, создав из него пустую марку (клавиша «g» нижн.рег. вернёт кругу видимость). При Плотности 8 или 9 метка невидимого круга создаёт вокруг себя заливку.
  И вся эта конструкция из 4-х Ломаных и 4-х меток для заливки может перемещаться и изменяться в размерах как единое целое также успешно, как и по отдельным своим частям.
  Про объединения элементов в группы и о совместном их перемещении смотрите тут - http://youtu.be/lWpFxt3VWe8

  Какие ещё действия можно совершать с Ломаными в режиме Показа?

  Выбрав Ломаную можно посмотреть, как на ней расположены точки и узнать их количество. Для этого нажимаем клавишу «N» на нижнем регистре. Точки показываются в том цвете и такого размера, какой выставлен на верхней панели.
  Расположение точек можно нормализовать, то есть расположить их на Ломаной равномерно. Нажав клавишу «N» на верхнем регистре мы увидим новое расположение точек. Если оно нас устраивает, то, кликнув по появившейся надписи на текстовом поле, мы продолжаем это действие.

  После того, как Ломаная выбрана, мы можем двигать точку её заливки, используя клавиши со стрелочками на краю клавиатуры. Этими же клавишами, нажимаемыми на верхнем регистре, можно двигать начальную точку Ломаной.
  Шаг перемещения во всех подобных случаях определяется цифрой над кнопочкой «w» на верхней панели.

  Выбрав Ломаную, можно зайти на её точки с тем, чтобы выборочно корректировать их положение. Передвижение по точкам Ломаной делается клавишами < и > нажимаемыми на нижнем регистре, а также клавишами «m» и «/» для быстрого перемещения.
  Клавиши со стрелочками передвигают выбранную точку индивидуально, а те же клавиши, нажимаемые на верхнем регистре сдвигают несколько точек в окрестности выбранной. Сдвигаемая окрестность расширяется, если ввести опции кнопки «сс» (копирование кругами – кнопка расположена на левой панели). Клавиша «end» нижнего регистра сглаживает Ломаную в окрестности выбранной точки. Скорость сглаживания также зависит от цифры над кнопочкой «w».
  При всех этих операциях становится виден новый контур, но также виден и старый контур. После нажатия на кнопку «закрепить» или на клавишу «Пробел» новый контур Ломаной закрепляется, а старый - исчезает.

  Есть и другая возможность удобного сдвига точек Ломаной линии – выставив ЗЕЛЁНУЮ «опцию рисования» на левой панели, мы можем двигать точки графической фигуры простыми движениями стилуса http://youtu.be/LOCxg-Qvrdw 
  Размер области сдвига регулируется цифрой на кнопке «Градиент» на левой панели. При выставленном цветном «ластике» правка контура делается не только для одного выбранного графического примитива, но одновременно и для других элементов, имеющих тот же номер группы, что и выбранный эл-т.
  Градиент = 0 при выключенном (не цветном) ластике позволяет ещё и поворачивать фигуру, и менять её размер, двигая марку-квадратик так же, как и в обычном режиме (жёлтый с буквой «а»).

  ПРЕОБРАЗОВАНИЯ ГРАФИЧЕСКИХ ПРИМИТИВОВ
 
  В режиме Показа графические элементы схожей структуры могут видоизменяться, объединяться или преобразовываться друг в друга.

  Все элементы могут быть зеркально отражены поодиночке, или в составе группы, относительно начальной точки выбранного элемента. Отражение по горизонтали делается нажатием клавиши «o» латинское, а по вертикали – этой же клавишей «O» на верхнем регистре.
  Клавиша «х» русское в том же ряду сократит размер графики по горизонтали, а эта же клавиша «Х» на верхнем регистре – увеличит ширину графических элементов. Величина сокращения/увеличения регулируется цифрой над кнопочкой «w».
 
  К точкам Многоугольника или Ломаной можно добавить точки, взятые от другого аналогичного элемента. Преобразуемый элемент нужно выбрать, а в текстовом поле указать № строки элемента-донора. Затем кликнуть J в строке меню.
  Если указан № той же строки, что выбрана, а на контуре избрана точка, то клик по J укоротит контур Многоугшольника или Ломаной до избранной точки.
  Есть ещё одно преобразование только для точек Ломаной линии – нажатие клавиши «j» на клавиатуре компьютера инвертирует точки контура, то есть, запишет их в обратном порядке. Начальная точка при этом останется на прежнем месте, но Ломаная будет замыкаться не от бывшей последней, а от бывшей первой точки.

  Клавиша «h» нижнего регистра преобразует Ломаную в Многоугольник и обратно, создаёт Многоугольник по подобию Прямоугольника, а также фигуру Безье 37 по подобию скруглённого Многоугольникака (его скругление делается клавишей <g>).
  Эта же клавиша «h» преобразует Прямую или Круг в Ломаную. Число точек на Ломаной нужно указать в текстовом поле над кнопкой Paste.
  Клавиша <f> нижн.регистра меняет вид заполнения Ломаной от заливки к зачерчиванию тонкими линиями и обратно. Тип линий зачерчивания 1-5 (сплошные или штрих-пунктиры) регулируется размером точки.
 
  Сделанная фигура Безье 37 заливается цветом фона. Если заливка окажется в стороне, то выбрав фигуру нужно кликнуть её внутреннюю точку, и перенести заливку на эту точку, нажав клавишу «G» на верхнем регистре.
  Нажав клавиши «f» или «h» на нижнем регистре, мы преобразуем Фигуру 37 в фигуру 36 и заменим заливку на зачерчивание, или получим Фигуру 38 – комбинацию кривых Безье, которая целиком не заливается, но информация о положении точки заливки для неё сохраняется, поэтому, нажав «g», мы всегда можем вернуться обратно – к кривой 37. Однако, получить из Фигуры 37 многоугольник невозможно, поскольку кривые в фигуре Безье могут в принципе идти не по порядку, а чередуясь между собой произвольным образом.

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

__________
23.08.2021