<< Click to Display Table of Contents >> Navigation: Создание окон для клиента визуализации > Рекомендации по созданию окон > Создание произвольных фигур |
С использованием элементов Граф, Ломаная линия, Полигон можно создать произвольную фигуру, установив соответствующее значение в свойстве Геометрия. Рассмотрим основные правила работы. Это свойство имеет тип данных STRING и задает одну или несколько геометрических фигур.
Фигура описывается по правилам SVG path и выражение имеет вид:
M X0,Y0 [<line1>] X1,Y1 .. [<lineN>] XN,YN[<format>]
•Xi,Yi - координаты вершин фигуры. Координаты задаются относительно левого верхнего угла прямоугольника, ограничивающего элемент. Координаты задаются для размеров прямоугольника 160*160 px; фигуры строятся по этим координатам, а затем вписываются в заданные размеры элемента (масштабируются с сохранением пропорций между фигурами);
•linei - вид линии между вершинами [Xi-1,Yi-1] и [Xi,Yi]:
•format - формат задания координат, необязательный параметр.
Для построения фигур используются следующие команды:
•М - разделитель фигур в строке (начальная точка);
•L - прямая (необязательный параметр, используется по умолчанию);
•Z - соединение предшествующей точки с точкой команды M;
•Q - квадратичная кривая Безье;
•Т - гладкая квадратичная кривая Безье;
•С - кубическая кривая Безье;
•S - гладкая кубическая кривая Безье;
•А - дуга (часть) эллипса.
Описания фигур в одной строке должны иметь один и тот же формат задания координат.
Например, две следующие строки задают одну и ту же комбинацию фигур, показанную на рисунке:
M 0,0 L 160,0 L 160,160 L 0,160 L 0,0 M 16,80 L 80,16 L 144,80 L 80,144 L 16,80
M 0,0 L 1,0 L 1,1 L 0,1 L 0,0Z M 0.1,0.5 L 0.5,0.1 L 0.9,0.5 L 0.5,0.9 L 0.1,0.5Z
Существуют следующие зарезервированные слова, заменяющие описание фигуры:
• RECT – прямоугольник;
• OVAL – овал.
В строке, содержащей зарезервированное слово, нельзя использовать никакие другие описания фигур, в т.ч. другие зарезервированные слова.
Заливка фигур при наложении вычисляется методом AND.
Стоит учитывать что существует настройка нормализация отображения геометрии которая влияет на отображение фигуры в RT.
Пример отображения окна в RT с включенной настройкой:
Пример отображения окна в RT с выключенной настройкой:
Команда Z используется соединения предшествующей точки с точкой команды M. Рассмотрим пример использования команды Z. Сформируем выражение следующего вида:
M10,10 50,100 100,100 140,10
В этом случае будет построена трапеция без верхнего основания.
При использовании команды Z в конце выражения M10,10 50,100 100,100 140,10Z, фигура приобретет следующий вид:
При помощи команду Q можно построить квадратичную кривую Безье. В данном случае выражение имеет вид:
M10,70Q50,25 190,70
В результате получим фигуру следующего вида:
В данном примере показана отрисовка квадратичной кривой Безье от начальной точки 10,70 до конечной 190,70 с контрольной точкой 50,25.
При помощи команду T можно построить гладкую квадратичную кривую Безье. В данном случае выражение имеет вид:
M10,150Q50,105 150,150T290,150
В результате получим фигуру следующего вида:
В данном примере показана отрисовка квадратичной кривой Безье от текущей точки 10,150 до заданной 290,150. Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды.
При помощи команду C можно построить кубическую кривую Безье. В данном случае выражение имеет вид:
M10,70C60,10 140,10 190,70
В результате получим фигуру следующего вида:
В данном примере показана отрисовка кубической кривой Безье из начальной точки 10,70 в конечную 190,70. Кривая имеет две контрольные точки с координатами 60,10 и 140,10.
При помощи команду S можно построить гладкую кубическую кривую Безье. В данном случае выражение имеет вид:
M10,150C60,105 100,105 150,150S240,195 290,150
В результате получим фигуру следующего вида:
В данном примере показана отрисовка кубической кривой Безье от текущей точки 10,150 до заданной 290,150 с одной контрольной точкой 240,195.
При помощи команду A можно построить дугу (часть) эллипса. В данном случае выражение имеет вид:
M100,150 A40,50 0 1,1 150,150
В результате получим фигуру следующего вида:
В данном примере показана отрисовка элиптической кривой из начальной точки 100,150 в конечную150,150. Кривая имеет два радиуса 40,50 и два управляющих флага:
•0 - отвечает за угол поворота всей дуги эллипса относительно оси абсцисс.
•1,1 - два параметра large-arc-flag и sweep-flag. large-arc-flag отвечает за вывод большей (1) или меньшей (0) части дуги, а sweep-flag отвечает за направление отрисовки дуги из начальной точки в конечную точку. Если значение равно 1, то дуга эллипса будет отрисована по часовой стрелке. При значении равном 0 дуга будет отрисоваться против часовой стрелки.