Фигуры и рисование

Фигуры представляют один из способов построения простейшей двухмерной графики и фактически являются обычными элементами как, к примеру, кнопка. К фигурам относятся Polygon (многоугольник), Ellipse (эллипс), Rectangle (прямоугольник), Line (простая линия), Polyline (несколько линий), Path (геометрический путь). Все они наследуются от абстрактного класса Shape, который определяет ряд общих свойств:

• Fill: заполняет фон фигуры с помощью кисти аналогично свойству Background у других элементов

• Stroke: устанавливает кисть, которая отрисовывает границу фигуры

• StrokeThikness: задает толщину границы фигуры

• StrokeStartLineCap и StrokeEndLineCap: создают для незамкнутых фигур (Line) контур в начале и в конце линии соответственно

• StrokeDashArray: задает границу фигуры в виде штриховки, создавая эффект пунктира

• StrokeDashOffset: задает расстояние до начала штриха

• StrokeDashCap: задает форму штрихов

Ellipse

Ellipse представляет овал:

<Ellipse Fill="LightBlue" Width="200" Height="200" />

При одинаковой ширине и высоту получается круг:

Rectangle

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

Line представляет простую линию. Для создания линии надо указать координаты в ее свойствах X1, Y1, X2 и Y2. При этом надо учитывать, что началом координатной системы является верхний левый угол:

<Line X1="100" Y1="30" X2="200" Y2="150" Stroke="Red" />

Polygon

Polygon представляет многоугольник. С помощью коллекции Points элемент устанавливает набор точек - объектов типа Point, которые последовательно соединяются линиями, причем последня точка соединяется с первой:

<Polygon Fill="LightPink" Points="50, 150, 150, 50, 250, 150" />

В данном случае у нас три точки (50, 150), (150, 50) и (250, 150), которые образуют треугольник.

Polyline

Polyline представляет набор точек, соединенных линиями. В этом плане данный элемент похож на Polygon за тем исключением, что первая и последняя точка не соединяются:

<Polyline Stroke="Red" Points="50, 150, 150, 50, 250, 150" />

Path

Элемент 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

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 по указанным точкам