Firemonkey. От простого к сложному #7. Работа с компонентом TPath.

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

Сегодня я решил продолжить серию статей про платформу FireMonkey и немного осветить тему по работе с векторной графикой при использовании компонента TPath. Всё-таки, использование уже готовых примитивов и загрузка готовых изображений в программе — это хорошо и здорово, но иногда требуется и самим рисовать какие-либо элементы интерфейса и отдельных частей компонентов управления. И в этом случае нам будет кстати использование компонента TPath. С помощью свойств этого компонента можно рисовать практически не ограниченные по сложности формы — от банальных кругов и стрелочек, до…да до чего пожелаете. 

Самый простой пример где используется TPath — это компонент TComboBox. В TCombobox TPath используется для отрисовки стрелочки:

Само описание формы (в нашем случае — перевернутого треугольника) содержится в свойстве Data:TPathData компонента TPath. Посмотрим, что содержится в этом свойстве у ComboBox:

То, что подчёркнуто красным на рисунке — это ни что иное как язык разметки масштабируемой векторной графики. Как Вы понимаете, «масштабируемой» означает, что как бы мы не изменяли размеры TPath, как бы мы его не растягивали или, наоборот — сжимали, рисунок не потеряет качества. Не будет зазубринок, не потеряются пиксели при уменьшении изображения и т.д. И это замечательно — можно нарисовать форму размером, скажем 5х5 пикселей и потом растягивать её хоть на весь экран — удобно.

Теперь разберемся более детально, что означают M, Z, L и пр. символы в разметке TPathData.

Любая буква в разметке — это команда. Любая цифра в разметке — это параметры команды (чаще всего — координаты).  Например, M (m) — определяет команду MoveTo, причем, если команда задана в верхнем регистре, то параметры команды — это абсолютные координаты, а если в нижнем, то относительные. Соответственно,  команда L — это LineTo — рисует линию из текущей точки в точку, заданную в параметрах команды L.

Я не ставлю сейчас перед собой цель расписать детально то, что представляет из себя SVG (Scalable Vector Graphics). Однако прояснить некоторые моменты по работе с этим языком разметки в TPath, думаю, будет полезно. Итак, чтобы не путать ни Вас ни себя сразу оговорюсь — всё, что будет рисоваться ниже — будет рисоваться в абсолютных координатах, ну а раздичие между абсолютными и относительными координатами, кому это потребуется, сможет узнать самостоятельно.

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

Теперь, используя эту координатную сетку, попробуем что-нибудь на ней изобразить, используя команды M и L. Например, нарисуем простой ромб. PathData будет у нас выглядеть вот так:

M 1,0,  L 2,1, L 1,2, L 0,1, L 1,0

Это полная запись всего пути. Если мы используем только команды M и L, то можно использовать и сокращенную запись. Вот такую:

M 1,0,  2,1, 1,2, 0,1, 1,0

При сокращенной записи все пары чисел, идущие за параметрами команды M интерпретируются как параметры команды L. Если начало пути задано абсолютными координатами (как у нас), то и команда LineTo будет неявно использовать абсолютные координаты.
В результате такой записи мы получили в Preview вот такой аккуратненький ромбик:

Не трудно понять, что наш путь пролегал по следующим точкам:

В программе я могу представить этот ромб, например, вот так:

Или вот так:

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

Команда C определяет кривую Базье. Пример кубической кривой Базье в TPath:

M 1,2 C 1,1 2,1 2,2

На экране эта кривая будет простой дугой:

В нашей системе координат команды могут быт представлены следующим образом:

Зеленым выделены точки команды C. Соответственно, если продолжать рисовать кривую дальше, то последняя точка первой кривой (у нас это точка с координатами (2,2)) станет первой точной для второй кривой, то есть, если написать команду C вот так:

M 1,2 C 1,1 2,1 2,2, 2,1,3,1, 3,2

То получим вот такую незатейливую кривулину:

В общем можно долго и упорно тренироваться рисовать такие кривые, но мы этого делать сегодня не будем. Скажу только, что компонент TPath поддерживает и другие команды SVG, например, V и H, которые рисуют вертикальные и горизонтальные линии, A для рисования дуг, S для рисования сглаженных кривых и т.д. Со всеми этими командами можно ознакомиться в официальной документации по SVG, а также посмотреть ряд интересных примеров использования SVG в ваших приложениях.

Подведем небольшой итог. Даже используя такие простенькие примеры, как показано выше, можно сказать, что компонент TPath дает нам довольно мощные возможности по использованию векторной графики в своих Delphi-приложениях. Используя SVG, можно нарисовать фигуру практически любой сложности и не бояться, что при изменении масштаба наше изображение потеряет качество. Ну, а использование TPath при разработки собственных компонентов для FireMonkey, думаю, позволит создавать контролы любых форм и конфигураций.

На сегодня все. Изучайте TPath, рисуйте кривые, прямые с использованием SVG и не забывайте про конкурс на DelphiFeeds.ru. Кстати, про Delphi XE2 — на Ozon.ru появились первые книги по Delphi XE2 и одна из них занесена в раздел «Книги» блога WebDelphi.