Главная » Silverlight » Объединение фигур с ПОМОЩЬЮ класса GeometryGroup

0

Объединить несколько фигур Geometry проще всего, вложив их в элемент Geometry- Group. Ниже приведена разметка группы, состоящей из прямоугольника и эллипса.

<Path Fi11="Ye11bw" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" > <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"> </RectangleGeometry>

<EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry> </GeometryGroup> </Path.Data>

</Path>

На экране объединенная фигура выглядит так же, как и при размещении элемен­тов RectangleGeometry и EllipseGeometry (или Rectangle и Ellipse) отдельно. Одно из преимуществ группирования состоит в ускорении прорисовки интерфейса. Группа является элементом, поэтому на экране рисуется один элемент, а не несколько. Если на странице размещено несколько десятков фигур, эффект почти незаметен. Ускорение прорисовки существенно, когда страница содержит сотни или тысячи фигур, что имеет место довольно часто.

При размещении многих фигур в одном элементе Path отдельные фигуры теряют способность генерировать события мыши. Все события мыши генерируются элементом Path. Однако платформа Silverlight предоставляет способ проверки, наведен ли указа­тель на элемент. Для этого предназначен метод HitTest (), встроенный во все элементы.

После объединения фигур RectangleGeometry и EllipseGeometry в группу сохраня­ется возможность манипулировать ими отдельно. Например, каждая фигура предостав­ляет свойство Transform, с помощью которого ее можно растянуть, повернуть или на­клонить независимо от других фигур группы.

Примечание. В отличие от WPF, платформа Silverlight не позволяет повторно использовать один геометрический объект в нескольких элементах Path. Если два объекта обладают одинаковыми свойствами, необходимо создать две отдельные копии.

Важно понимать поведение фигур, включенных в группу, когда они пересека­ются. В отличие от примитивов, которые рисуются один поверх другого, в объекте GeometryGroup заполнение фигур определяется свойством FillRule, которое может принимать значение EvenOdd или NonZero (см. выше). Рассмотрим, что произойдет, если разместить эллипс поверх прямоугольника (сравните с предыдущим примером).

<Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10"

Canvas.Left="10" > <Path.Data> <GeometryGroup> <RectangleGeometry Rect="0,0 100,100"> </RectangleGeometry>

<EllipseGeometry Center="50,50" RadiusX="35" RadiusY="25"></EllipseGeometry> </GeometryGroup> </Path.Data>

</Path>

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

Создать квадрат с отверстием можно также, выведя поверх него эллипс, заполнен­ный белым цветом. Однако класс GeometryGroup становится по-настоящему полезным, когда в качестве нижележащего содержимого используется сложный рисунок. Эллипс интерпретируется как отверстие в фигуре, а не другая фигура, заполненная иначе, по­этому сквозь него видно нижележащее содержимое. Вставьте перед определением эле­мента Path приведенный ниже элемент TextBlock.

<TextBlock Canvas.Тор="50" Canvas.Left="20" FontSize="25" . F0ntWeight="B0ld">текстовый блoк</TextBlock>

Результат показан на рис. 8.14.

Рис. 8.17. Два возможных направления рисования дуги

Кривые Безье

Кривая Безье соединяет два сегмента и вычисляется на основе сложной математиче­ской формулы. Формула содержит координаты двух управляющих точек, определяющих форму кривой. Кривые Безье часто используются в векторных рисунках благодаря их гибкости. С помощью начальной, конечной и двух управляющих точек можно создавать самые разнообразные кривые, включая петли. На рис. 8.18 показан классический пример кривой Безье. Два маленьких кружочка обозначают управляющие точки. Штриховые от­резки соединяют управляющие точки с начальной и конечной точками сегмента.

Рис. 8.18. Кривая Безье

Для рисования кривых Безье знать математическую формулу не обязательно. Достаточно понимать, как форма кривой зависит от позиций управляющих точек. Форма кривой определяется с помощью следующих двух правил.

•       В начальной и конечной точках кривая Безье параллельна линии, соединяющей ее с управляющей точкой (т.е. параллельна штриховым линиям на рис. 8.18).

•       Изогнутость кривой Безье определяется расстоянием до управляющей точки. Чем дальше управляющая точка, тем сильнее она притягивает кривую к себе.

Для определения кривой Безье в разметке нужно задать три точки. Первые две (BezierSegment. Pointl и BezierSegment. Point2) являются управляющими точками, третья (BezierSegment. Point3) — конечная точка кривой Безье. Начальную точку за­давать в разметке элемента не нужно, потому что в качестве ее используется конечная точка предыдущего сегмента.

Пример, показанный на рис. 8.18, состоит из трех компонентов. В компонентах ис­пользуются разные типы линий, поэтому в разметке определены три отдельных конту­ра Path. Первый контур является кривой Безье, второй выводит две штриховые линии, а третий — кружочки, обозначающие управляющие точки. Ниже приведена полная раз­метка рисунка.

<Canvas>

<Path Stroke="Blue" StrokeThickness="5" Canvas.Top="20"> <Path.Data> <PathGeometry> <PathFigure StartPoint="10,10"> <BezierSegment Pointl="130,30" Point2="40,140" Point3="150,150"></BezierSegment> </PathFigure> </PathGeometry> </Path.Data> </Path>

<Path Stroke="Green" StrokeThickness="2" StrokeDashArray="5 2" Canvas.Top="20"> <Path.Data> <GeometryGroup> <LineGeometry StartPoint="10,10" EndPoint="130,30"> </LineGeometry>

CLineGeometry StartPoint="40,140" EndPoint="150,150"> </LineGeometry> </GeometryGroup> </Path.Data> </Path>

<Path Fill="Red" Stroke="Red" StrokeThickness="8" Canvas.Top="20"> <Path.Data> <GeometryGroup> <EllipseGeometry Center="130,30"></EllipseGeometry> <EllipseGeometry Center="40,140"></EllipseGeometry> </GeometryGroup> </Path.Data> </Path> </Canvas>

Определить кривую Безье в разметке — довольно утомительная задача, решаемая методом многочисленных проб и ошибок. Намного легче создать ее (как и многие дру­гие графические элементы) с помощью специальной графической программы, поддер­живающей экспорт в формат XAML, например программы Microsoft Expression Blend.

Совет. Ознакомиться с математической формулой, определяющей кривую Безье, можно на сайте Википедии по адресу

www.en.wikipedia.org/wiki/Bezier_curve.

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

По теме:

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