Фигуры представляют один из способов построения простейшей двухмерной графики и фактически являются обычными элементами как, к примеру, кнопка. К фигурам относятся Polygon (многоугольник), Ellipse (эллипс), Rectangle (прямоугольник), Line (простая линия), Polyline (несколько линий), Path (геометрический путь). Все они наследуются от абстрактного класса Shape, который определяет ряд общих свойств:
Fill: заполняет фон фигуры с помощью кисти аналогично свойству Background у других элементов
Stroke: устанавливает кисть, которая отрисовывает границу фигуры
StrokeThikness: задает толщину границы фигуры
StrokeStartLineCap и StrokeEndLineCap: создают для незамкнутых фигур (Line) контур в начале и в конце линии соответственно
StrokeDashArray: задает границу фигуры в виде штриховки, создавая эффект пунктира
StrokeDashOffset: задает расстояние до начала штриха
StrokeDashCap: задает форму штрихов
Ellipse представляет овал:
<Ellipse Fill="LightBlue" Width="200" Height="200" />
При одинаковой ширине и высоту получается круг:
Rectangle представляет прямоугольник:
<StackPanel Background="White"> <Rectangle Fill="LightBlue" Width="200" Height="100" Margin="10" /> <Rectangle Fill="LightPink" Width="200" Height="100" RadiusX="15" RadiusY="15" Margin="10" /> </StackPanel>
Line представляет простую линию. Для создания линии надо указать координаты в ее свойствах X1, Y1, X2 и Y2. При этом надо учитывать, что началом координатной системы является верхний левый угол:
<Line X1="100" Y1="30" X2="200" Y2="150" Stroke="Red" />
Polygon представляет многоугольник. С помощью коллекции Points элемент устанавливает набор точек - объектов типа Point, которые последовательно соединяются линиями, причем последня точка соединяется с первой:
<Polygon Fill="LightPink" Points="50, 150, 150, 50, 250, 150" />
В данном случае у нас три точки (50, 150), (150, 50) и (250, 150), которые образуют треугольник.
Polyline представляет набор точек, соединенных линиями. В этом плане данный элемент похож на Polygon за тем исключением, что первая и последняя точка не соединяются:
<Polyline Stroke="Red" Points="50, 150, 150, 50, 250, 150" />
Элемент Path предназначен для создания сложных геометрических путей. Класс Path имеет свойство Data, которое определяет объект Geometry - геометрический объект для отрисовки. Этот объект задает фигуру или совукупность фигур для отрисовки.
Geometry является абстрактным классом, поэтому в качестве объекта используется один из производных классов:
LineGeometry представляет линию, эквивалент фигуры Line
RectangleGeometry представляет прямоугольник, эквивалент фигуры Rectangle
EllipseGeometry представляет овал, эквивалент фигуры Ellipse
PathGeometry представляет путь, образующий сложную геометрическую фигуру из простейших фигур
GeometryGroup создает фигуру, состоящую из нескольких объектов Geometry
Например, создадим набор фигур:
<Path Stroke="Red"> <Path.Data> <GeometryGroup FillRule="EvenOdd"> <LineGeometry StartPoint="100,100" EndPoint="220,10" /> <EllipseGeometry Center="100,100" RadiusX="50" RadiusY="40" /> <RectangleGeometry Rect="120,100 80,20" /> </GeometryGroup> </Path.Data> </Path>
Номинально здесь три фигуры: линия, овал и прямоугольник. Однако так как они объединены в один путь, то мы можем управлять ими как единым целым.
Свойство FillRule позволяет установить режим закрашивания фигур в геометрическом пути. Если он равен EvenOdd
,
то (значение по умолчанию), то перекрывающие поверхности являются прозрачными. Если же установить FillRule="Nonzero"
, то перекрывающиеся
поверхности геометрий будут окрашены также, как и остальные части пути. Цвет в данном случае определяется свойством Fill класса Path.
PathGeometry содержит один или несколько компонентов PathFigure. Объект PathFigure в свою очередь формируется из сегментов. Все сегменты наследуются от класса PathSegment и бывают нескольких видов:
LineSegment задает отрезок прямой линии между двумя точками
ArcSegment задает дугу
BezierSegment задает кривую Безье
QuadraticBezierSegment задает квадратичную кривую Безье
PolyLineSegment задает сегмент из нескольких линий
PolyBezierSegment задает сегмент из нескольких кривых Безье
PolyQuadraticBezierSegment задает сегмент из нескольких квадратичных кривых Безье
Эти сегменты составляют свойство Segment объекта PathFigure. Кроме того, PathFigure имеет еще несколько важных свойств:
StartPoint - точка начала первой фигуры
IsClosed - если значение равно true, то первая и последняя точки (если они не совпадают) соединяются
IsFilled - если значение равно true, то площадь внутри пути окрашивается кистью, заданной свойством Fill у объекта Path
Пример использования:
<Path Stroke="Red"> <Path.Data> <PathGeometry> <PathFigure StartPoint="20,140"> <BezierSegment Point1="40,160" Point2="40,180" Point3="20 200" /> </PathFigure> <PathFigure StartPoint="40,140"> <LineSegment Point="40,200" /> </PathFigure> <PathFigure StartPoint="60,140"> <BezierSegment Point1="40,160" Point2="40 180" Point3="60,200" /> </PathFigure> <PathFigure StartPoint="35,170"> <LineSegment Point="45,170" /> </PathFigure> <PathFigure StartPoint="100,140"> <PolyLineSegment Points="70,140 70,170" /> <PolyLineSegment Points="90,170 70,170 70,200,100,200" /> </PathFigure> <PathFigure StartPoint="110,140"> <PolyLineSegment Points="110,200 110,170 140,170 140,140 140,140 140,205" /> </PathFigure> <PathFigure StartPoint="180,140" IsClosed="True"> <ArcSegment Point="180,170" Size="70,20" SweepDirection="Counterclockwise" /> <PolyLineSegment Points="160,200 180,170 180,200" /> </PathFigure> </PathGeometry> </Path.Data> </Path>
Существует также сокращенный вариант записи сегментов путей. Так, следующее описание пути:
<Path Stroke="Red"> <Path.Data> <PathGeometry> <PathFigure StartPoint="20,170"> <LineSegment Point="50,170" /> </PathFigure> </PathGeometry> </Path.Data> </Path>
можно написать следующим образом:
<Path Data="M 20,170 L 50,170 Z" Stroke="Red" />
Что в данном случае означате сокращенная запись?
M x,y | Создает новый объект PathFigure и указывает на его начальную точку |
Z | Завершает фигуру и устанавливает свойство IsClosed в true. Если же не требуется завершать фигуру, то вместо Z употребляется буква M |
L x,y | Создает объект LineSegment до указанной точки |
A raduisX, radiusY, degrees, isLargArc, IaClockwize, x,y | Создает новый объект ArcSegment с соответствующими параметрами |
С x1,y1,x2,y2,x,y | Создает новый объект BezierSegment по указанным точкам |
Q x1,y1, x,y | Создает новый объект QuadraticBezierSegment по указанным точкам |
S x1,y1, x,y | Создает новый объект BezierSegment по указанным точкам |