Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Графика, трансформация и анимация Windows Runtime

0

Графические примитивы

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

Основными графическими примитивами в Windows Runtime являются:

Rectangle — прямоугольник;

Ellipse — эллипс (как частный случай — окружность);

Line — прямая линия;

Polygon — замкнутый контур; Polyline — незамкнутый контур; Path — линии любой сложности.

Все  перечисленные графические  примитивы являются наследниками  класса Shape, а он, в свою  очередь, прямым наследником FrameworkElement. С одной стороны, это  означает, что  графические  примитивы могут  быть  размещены в   любом из  контейнеров, а с  другой —  графические примитивы не имеют большинства свойств, которые характерны элементам управления. Несмотря на это, класс Shape предоставляет несколько общих свойств, которые могут быть использованы всеми примитивами. Рассмотрим эти свойства.

·                   Stroke — задает кисть, которой прорисовывается обводка фигуры.

·                   StrokeThickness — задает ширину обводки.

·                   Fill — позволяет установить кисть заливки области, которая  находится внутри контура фигуры.

Если говорить о контуре фигуры, то тут возможны дополнительные  свойства,

задающие обводку пунктиром или закругление краев обводки.

·                   StrokeDashArray  —  позволяет задать  массив типа  double,   который определяет шаблон для обводки фигуры пунктиром. Значения в массиве определяют длину линий и пропусков в обводке примитива.

·                   StrokeDashCap  —  определяет  форму  наконечников   (углов)   обводки (пунктиров). Может принимать одно из четырех значений: Float, Round, Squared, Triangle.

·                   StrokeDashOffset — смещение обводки пунктиром.

·                   StrokeEndLineCap — определяет вид наконечника каждого из пунктиров

 (конец пунктира).  Может принимать значения: Float, Round,  Squared,

Triangle.

·                   StrokeStartLineCap — определяет вид наконечника каждого из пунктиров (начало пунктира). Может принимать значения:  Float,  Round, Squared, Triangle.

·                   StrokeLineJoin — определяет тип соединения линий в случае пересечения.

Может принимать следующие значения: Bevel, Miter, Round.

Продемонстрируем  использование этих   свойств на   первом   графическом примитиве Rectangle.

<StackPanel x:Name="LayoutRoot" Background="White">

<Rectangle Width="300" Height="100" Stroke="Black" StrokeThickness="10"

RadiusX="25" RadiusY="25" Margin="5"></Rectangle>

<Rectangle Width="300" Height="100" Stroke="Black" StrokeThickness="10" RadiusX="25" RadiusY="25" StrokeDashArray="5,2,3,2" Margin="5"></Rectangle>

<Rectangle Width="300" Height="100" Stroke="Black" StrokeThickness="10" RadiusX="25" RadiusY="25" StrokeDashArray="5,2,3,2" StrokeDashCap="Triangle" Margin="5"></Rectangle>

</StackPanel>

В результате работы этого кода на экране появятся следующие «прямоугольники».

Рис. 4.1.

Как видно из кода, чтобы создать прямоугольник, достаточно задать  свойства Width и Height, которые определяют длину и ширину фигуры. Дополнительные свойства  RadiusX  и  RadiusY  задают  углы  изгиба  вершин прямоугольника. Первый прямоугольник  из  нашего  примера  имеет  сплошную  обводку. Для большей  наглядности  мы  установили  ширину  обводки, равную 10.  Второй и третий прямоугольники включают дополнительное свойство StrokeDashArray, задающее длину  штрихов  в  5 единиц и 3 единицы соответственно,  а также величину  пробела  в   2  единицы.  Третий  прямоугольник  задает  прорисовку окончаний штрихов в виде  треугольников.

Графический   примитив  Ellipse   позволяет  нарисовать  эллипс   или    круг. Его  основные свойства  —  Width  и  Height,  которые  определяют  размеры горизонтального и вертикального диаметра эллипса.

<Ellipse Width="300" Height="100" StrokeThickness="10" Stroke="Black" Fill="Red">

</Ellipse>

В данном примере мы применили еще одно свойство  — Fill,  позволяющее выполнить заливку контура. При этом была  использована  специальная кисть SolidColorBrush, о которой речь  пойдет позже. Между тем для свойства  Fill существует конвертор, который преобразует имя цвета в кисть. Результат работы примера показан ниже.

Рис. 4.2.

Следующий графический примитив — Line, позволяющий отобразить прямую линию. Этому элементу достаточно принимать координаты начала и окончания линии.

<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Black"></Line>

Возникает  вопрос: относительно  чего  задаются  координаты?  Они  задаются относительно  контейнера  для  графического  примитива.   Если  контейнером является Canvas, то проблем с прямой нет, а вот  если в  качестве контейнера использовать другой элемент, то прямая будет сохранять длину и наклон, но не будет иметь привязки к конкретным координатам.

Следующий пример демонстрирует использование примитива Polygon, который позволяет создавать замкнутые контуры.

<Polygon Points="0,50,50,0,100,0,150,50,150,100,100,150,50,150,0,100" Stroke="Black" StrokeThickness="5">

</Polygon>

Как видно, здесь достаточно указать вершины фигуры. Порядок вершин имеет большое значение, так как определяет порядок прорисовки контура. Результат работы кода показан ниже.

Рис. 4.3.

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

<Polyline Points="0,50,50,0,100,0,150,50,150,100,100,150,50,150,0,100" Stroke="Black" StrokeThickness="5">

</Polyline>

Результат работы указанного примера будет выглядеть немного по-другому.

Рис. 4.4.

Наконец,  перейдем к  последнему графическому примитиву —  Path.  Задача этого объекта состоит в  построении линий любой сложности.  Фактически, он строит последовательность прямых и кривых линий. Несмотря на всю сложность объекта, у него только одно основное свойство — Data. Данное свойство может содержать либо геометрические объекты, о которых речь пойдет дальше, либо набор  данных,  состоящих  из  специальных  команд.  Рассмотрим  небольшой пример.

<Path Stroke="Black" StrokeThickness="5" Data="M 10,100 C 10,300 300,-200 300,100">

</Path>

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

Рис. 4.5.

Таким образом, в  свойстве  Data записывается имя команды, после  которого располагается набор значений, разделенных запятыми и отделяемых от команды пробелом. Затем через пробел следует другая команда и т. д.

Существует несколько  команд,  которые  можно  запомнить  и   использовать в элементе Path.

·                   M — позволяет перейти в заданную точку

·                   L — рисует линию от текущей точки до заданной.

·                   H — рисует горизонтальную линию заданной длины от текущей точки.

·                   V — рисует вертикальную линию заданной длины от текущей точки.

·                   C — принимает в качестве параметров три точки и позволяет построить кубическую  кривую Безье,  используя текущую  точку  и  третью  точку. Оставшиеся  две точки используются как вспомогательные.

·                   Q — принимает в качестве параметров  две точки и позволяет построить квадратичную кривую Безье, используя текущую и вторую точки.

·                   S — принимает в качестве параметров  две точки и позволяет нарисовать сглаженную кубическую кривую Безье.

·                   T — позволяет построить сглаженную квадратичную кривую Безье.

·                   A   —   позволяет  построить   эллиптическую   дугу.    Принимает    пять параметров: размер, угол поворота,  один из  двух сегментов  (0 или 1), направление отсчета угла (0 или 1), конечную точку.

·                   Z — завершает текущий контур, проводя прямую линию между начальной точкой и текущей.

Вот мы и рассмотрели все основные   примитивы. Перейдем теперь к  кистям,

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

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

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