Главная » Silverlight » Геометрический мини-язык

0

Фигуры, используемые в предыдущих примерах, были довольно простыми, состоя­щими всего из нескольких точек. Однако во многих практических задачах фигуры со­стоят из сотен сегментов. Определять каждый отрезок, дугу и кривую в сложном контуре так, как мы это делали в предыдущих примерах, не обязательно. Во-первых, существу­ют специальные графические инструменты (например, программа Expression Blend), позволяющие существенно облегчить задачу. Во-вторых, разработчики Silverlight соз­дали специальный альтернативный синтаксис, позволяющий определять сложные фи­гуры с помощью намного меньшего объема разметки. Этот синтаксис часто называют геометрическим мини-языком.

Код геометрического мини-языка фактически представляет собой длинную строку, содержащую ряд команд. Команды читаются преобразователем типов, который на их основе создает соответствующие фигуры. Каждая команда — это буква, после которой через пробел может быть приведено несколько чисел, разделенных запятыми и задаю­щих, например, координаты точки. Команды отделены друг от друга тоже пробелами.

В качестве примера рассмотрим разметку треугольника, для вывода которого используется замкнутый контур, состоящий из двух отрезков.

<Path Stroke="Blue"> <Path.Data> <PathGeometry> <PathFigure IsClosed="True" StartPoint="10,100"> <LineSegment Point="100,100" /> <LineSegment Point="100,50" /> </PathFigure> </PathGeometry> </Path.Data>

</Path>

На геометрическом мини-языке этот же контур можно определить так.

<Path Stroke="Blue" Data="M 10,100 L 100,100 L 100,50 Z"/>

Данный контур определен последовательностью из четырех команд. Первая коман­да М создает объект PathFigure и задает координаты начальной точки (10, 100). Затем две команды L создают два отрезка. Последняя команда Z завершает линию и присва­ивает свойству isClosed значение True. Запятые между командами и пробелы между командой и числовыми параметрами необязательны, однако нужно оставить хотя бы один пробел между соседними параметрами и командами. Следовательно, приведенную выше разметку можно записать так.

<Path Stroke="Blue" Data="M10 100 L100 100 L100 50 Z"/>

Понять геометрический мини-язык легко. В нем используется небольшой набор команд, приведенный в табл. 8.6. Параметры команд приведены курсивом.

Таблица 8.6. Команды геометрического мини-языка

Команда

Описание

F значение

Установка свойства Geometry.FillRule; число 0 задает значение EvenOdd, а 1 — значение Nonzero; команда F должна находиться в начале строки (если используется)

М х,у

Создание нового объекта PathFigure и установка начальной точки; эта команда должна находиться перед всеми другими командами, кроме F, однако в строку можно добавлять дополнительные команды м для перемещения начала координат (буква м означает "Move" — перемещение)

L х,у

Создание отрезка LineSegment, проведенного до заданной конечной точки (начальная точка совпадает с конечной точкой предыдущего сегмента)

Н х

Создание горизонтального отрезка LineSegment; значение у остается постоянным

Vy

Создание вертикального отрезка LineSegment; значение х остается постоянным

Окончание табл. 8.6

Команда

Описание

А радиус_Х, радиус_У, угол_ поворота, тип дуги, направление, х,у

Создание сегмента дуги ArcSegment до заданной точки х,у, кроме того, задаются радиусы эллипса, определяющего дугу, угол поворота дуги, булево значение isLargeArc, определяющее тип дуги, и свойство SweepDirection, определяющее направление дуги

С xl,yl х2,у2 х,у

Создание кривой Безье BezierSegment до заданной точки х,у с помощью управляющих точек xl,yl и х2,у2

Q xl,yl х, у

Создание квадратичной кривой Безье QuadraticBezierSegment до точки х,у с помощью одной управляющей точки xl,yl

S х2,у2 х,у

Создание плавной кривой Безье BezierSegment; в качестве первой управляющей точки используется вторая управляющая точка предыдущей кривой Безье

Т х2,у2 х,у

Создание плавной кривой Безье QuadrqticBezierSegment на основе второй управляющей точки предыдущего сегмента QuadraticBezierSegment, используемой в качестве первой управляющей точки нового сегмента

Z

Завершение кривой PathFigure и присвоение свойству IsClosed значения True; если свойство IsClosed должно быть равно False, эта команда не обязательна; вместо нее можно применить команду м, задающую начало новой кривой PathFigure; можно также завершить строку двойной кавычкой

Совет. В коде геометрического мини-языка имя любой команды можно ввести в нижнем регистре, и тогда параметры команды будут отсчитываться относительно предыдущей точки. Если имя введено в верхнем регистре, параметры обозначают абсолютные координаты.

Отсечение

Класс Geometry — мощное средство создания фигур. Однако его можно использовать не только в элементах Path, но и в любом месте, где необходимо предоставить абстракт­ное определение фигуры.

Например, класс Geometry можно использовать для установки свойства Clip (Отсечение), имеющегося у любого элемента. Свойство Clip позволяет ограничить об­ласть прорисовки элемента заданным контуром. С его помощью можно создавать эк­зотические эффекты. Обычно оно применяется для отсечения содержимого элемента Image, но использовать его можно с любым элементом. Единственное (весьма очевидное) ограничение состоит в том, что свойство clip должно содержать замкнутую кривую.

Ниже приведен пример использования одной и той же кривой для отсечения двух элементов: стандартной кнопки Button и элемента Image, выводящего растровое изо­бражение (рис. 8.19).

Ниже приведена разметка примера, показанного на рис. 8.19.

<Grid>

<Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button Content="Кнопка">

Рис. 8.19. Отсечение двух элементов

<Button.Clip> <GeometгyGroup Fi1lRule="Nonzero"> <EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150" />

<EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150" />

<EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140" /> </GeometryGroup> </Button.Clip> </Button>

<Image Grid.Column="l" Stretch="None" Source="creek.jpg"> <Image.Clip> <GeometryGroup FillRule="Nonzero"> <EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150" />

<EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150" />

<EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140" /> </GeometryGroup> </Image.Clip> </Image> </Grid>

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

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии