Объект Path позволяет создавать фигуры, к которым могут быть применены все атрибуты оформления– заливка, градиент, штриховка. Он может представлять замкнутые фигуры – такие как полигон, а также разомкнутые – такие как линия.
Фигура, образуемая объектом Path, состоит из отрезков прямых или дуг, которые строятся последовательно, от точки к точке. Для этого используются следующие команды: Move Command (M, m) (установить опорную точку), Line Command (L, l) (провести линию), Horizontal Line Command (H, h) (провести горизонтальную линию), Vertical Line Command (V, v) (провести вертикальную линию), Close Command (Z, z) (завершить построение объекта Path ), Cubic Smooth cubic (S, s) относится к команде Cubic (C, c) исходя из практических соображений. Теоретически это разные команды Smooth
(T, t) относится к команде Elliptical Arc Command (A) (провести эллиптическую кривую).
Координаты объекта задаются следующим образом:
<path d="M15,15 L185,15 Z"/>
Здесь d – атрибут, определяющий Path. Далее устанавливается опорная точка – M 15,15. От этой опорной точки проводится линии к точке с координатами 185, 15. Команда Z завершает рисование объекта – при этом происходит возврат к опорной точке.
Различают абсолютные и относительные команды. При работе с абсолютными командами все координаты задаются в системе рисунка, т.е. начало отсчета располагается в верхнем левом углу документа. (рис. 3.1, A).
(рис 3.1) Абсолютная (А) и относительная команда (Б).
Соответствующие координаты называются абсолютными. Однако необходимо учитывать, что вся фигура, как единое целое, может быть смещена при помощи задания других атрибутов объекта. При проведении линии L 185,15 происходит перемещение в точку, лежащую правее опорной точки на 170 пикселей (рис. 3.1,Б). Ординаты у них равные. Следовательно, можно рассматривать опорную точку в качестве точки начала отсчета и записывать перемещение так:
<path d="M15,15 l170,0 z"/>
Это относительная запись команды – ее название ( Line Command ) указывается строчной буквой. Если фигура состоит из нескольких точек, то при относительной форме записи каждая предыдущая точка становится точкой отсчета для последующей команды. Соответствующие этому случаю координаты называются относительными.
Для атрибута d справедливы следующие правила:
<path d="M15,15L185,15Z">
<path d="M15 15 L 185 15 Z">
<path d="M15,15 L185,15 185,85 15,85 Z"> – эквивалентная запись: <path d="M15,15 L185,15 L185,85 L15,85 Z">
<path d="M0,0 L .5.6 Z"/> – эквивалентная запись: <path d="M0,0 L 0.5, 0.6 Z"/>
Эти правила предназначены для сокращения размера кода. Для удобства визуального восприятия, однако, мы далее будем применять самую понятную форму записи – с разделением запятыми пар координат и с пробелами:
<path d="M15,15 L185,15 Z"/>
Группа команд для рисования линий и форм – самая простая группа объекта Path. В этом случае создаваемые линии представляют собой отрезки прямых, заключенных заданными точками. В табл. 3.1 приводится описание команд.
| Команда | Описание | Параметры |
|---|---|---|
| M/m (Move Command) | Установка точки отсчета. Следующие команды будут использовать эту точку в качестве опорной | Координаты (x, y) опорной точки |
| L/l(Line Command) | Рисование линии от текущей точки до заданной | Координаты (x, y) заданной точки. Добавляемая точка становится опорной |
| H/h (Horizontal Line Command) | Рисование горизонтальной линии от текущей точки до заданной | Координата x заданной точки. Координата y будет равна ординате текущей точки. Добавляемая точка становится опорной |
| V/v (Vertical Line Command) | Рисование вертикальной линии от текущей точки до заданной | Координата y заданной точки. Координата x будет равна абсциссе текущей точки. Добавляемая точка становится опорной |
| Z/z(closePath) | Завершение рисования линии от опорной точки | Без параметров |
При работе с большим количеством точек, более удобным представляется использование относительных команд.
| № | Код | Вид в браузере |
|---|---|---|
| 3.2.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" C anvas.Top="15" Data=" M15,15 L185,15 L185,85 L15,85 Z" /> </Canvas> |
|
|
| Описание | ||
В начале задается опорная точка M 15,15. От нее проводится линия в точку с координатами L 185,15. Далее добавляются еще две линии – L185,85 и L 15,85. Команда Z завершает объект Path, соединяя отрезком точку 15,185 с опорной точкой |
||
| № | Код | Вид в браузере |
| 3.2.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" Canvas.Top="15" Data=" M15,15 l170,0 L185,85 l-170,0 z" /> </Canvas> |
|
|
| Описание | ||
| В начале задается опорная точка M 15,15. От нее проводится линия в точку, с той же самой ординатой и лежащей правее на 170 пикселей при помощи относительной команды l 170, 0. Далее при помощи абсолютной команды L 185,85 добавляется линия. Точка с координатами 185, 85 становится точкой начала отсчета. От нее проводится линия в точку, с той же самой ординатой и лежащей левее на 170 пикселей. Следовательно, теперь команда будет принимать отрицательную абсциссу: l-170,0 Относительная команда z завершает объект Path, соединяя отрезком последнюю точку с опорной. | ||
| № | Код | Вид в браузере |
| 3.2.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" Canvas.Top="15" Data=" M15,15 H185 M185,15 V85 M185,85 H15 M15,85 V15" /> </Canvas> |
|
|
| Описание | ||
| В начале задается опорная точка M 15,15. От нее проводится горизонтальная линия в точку 185, 15 при помощи команды H 185, причем в качестве ординаты берется соответствующее значение опорной точки. Далее устанавливается новая опорная точка M 185, 15 и от нее проводится вертикальная линия V85, теперь в качестве абсциссы берется соответствующее значение новой опорной точки. Снова добавляется опорная точка M 185,85, проводится горизонтальная линия H15. Наконец, добавляется последняя опорная точка M 15, 85 и вертикальная линия V15 соединяет ее с исходной точкой | ||
| № | Код | Вид в браузере |
| 3.2.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" Canvas.Top="15" Data=" M15,15 h170 M185,15 v70 M185,85 h-170 M15,85 v-70" /> </Canvas> |
|
|
| Описание | ||
При использовании относительных команд каждая добавляемая опорная точка становится началом отсчета. В этом примере четыре пары "опорная точка – относительная команда":1) M15,15 h170 2) M185,15 v70 3) M185,85 h-170 4) M15,85 v-70 |
||
| № | Код | Вид в браузере |
| 3.2.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Fill="red" Canvas.Left="75" Canvas.Top="10" Data="M100,10 L105.8,27.2 123.8,27.2 109.4,38 114.6,55.2 100,45 85.4,55.2 90.6,38 76.2,27.2 94.2,27.2 " /> </Canvas> |
|
|
| Описание | ||
В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Исходные координаты взяты из примера второй Лекции |
||
| № | Код | Вид в браузере |
| 3.2.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Path Fill="red">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="
100,10">
<LineSegment Point="
105.8,27.2" />
<LineSegment Point="
123.8,27.2" />
<LineSegment Point="
109.4,38" />
<LineSegment Point="
114.6,55.2" />
<LineSegment Point="
100,45" />
<LineSegment Point="
85.4,55.2" />
<LineSegment Point="
90.6,38" />
<LineSegment Point="
76.2,27.2" />
<LineSegment Point="
94.2,27.2" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
|
|
| Описание | ||
| Представление фигуры в виде набора тегов. См. раздел " PathGeometry Class": http://msdn.microsoft.com/en-us/library/system.windows.media.pathgeometry.aspx | ||
| № | Код | Вид в браузере |
| 3.2.7 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Fill="dodgerblue" Stroke="blue" StrokeThickness="5" Canvas.Left="75" Canvas.Top="10" Data="M100,10 L121.6,22.5 121.6,47.5 100,60 78.4,47.52 78.4,22.5 Z" /> </Canvas> |
|
|
| Описание | ||
| В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Для завершения фигуры добавляется команда Z (сравните вид фигуры без этой команды). Исходные координаты взяты из примера второй лекции. | ||
| № | Код | Вид в браузере |
| 3.2.8 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Fill="dodgerblue" Stroke="blue" StrokeThickness="5"> <Path.Data> <PathGeometry> <PathFigure StartPoint="100,10"> <LineSegment Point="121.6,22.5" /> <LineSegment Point="121.6,47.5" /> <LineSegment Point="100,60" /> <LineSegment Point="78.4,47.52" /> <LineSegment Point="78.4,22.5" /> <LineSegment Point="100,10" /> </PathFigure> </PathGeometry> </Path.Data> </Path> </Canvas> |
|
|
| Описание | ||
| Представление фигуры в виде набора тегов. Для завершения штриховки фигуры добавлена еще один сегмент <LineSegment Point="100,10" />. При увеличении заметна зазубрина, возникающая в узле опорной точки (рис 3.2(рис 3.2) Увеличенное изображение фигуры Для устранения этого недостатка можно добавить еще один сегмент. | ||
Кривые
| Команда | Описание | Параметры |
|---|---|---|
| C/c (Cubic |
Рисование кубической кривой Безье от текущей точки (MX, MY) до заданной (X,Y) с начальной контрольной точкой (X1, Y1) и конечной (X2, Y2) (рис. 3.3) | X1, Y1, X2, Y2, X,Y |
| S/s
(Smooth cubic |
Рисование кубической кривой Безье от текущей точки (MX, MY) до заданной (X,Y). Начальная контрольная точка представляет собой отражение конечной контрольной точки предыдущей команды. Для конечной контрольной точки задаются координаты (X2, Y2) | X2, Y2 X,Y |
(рис 3.3) Рисование кубической кривой Безье
На рис. 3.3кроме самой кривой, изображены вспомогательные опорные точки и линии. Добавление подобных иллюстраций связано с некоторыми сложностями. Рассмотрим следующий фрагмент кода:
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <!--Объект Path--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data="M25,75 C25,15 175,15 175,75" /> <!--Вспомогательные фигуры--> <Line X1="25" Y1="15"X2="25" Y2="75" Stroke="green" StrokeThickness="3"/> <Line X1="175" Y1="15" X2="175" Y2="75" Stroke="green" StrokeThickness="3"/> <Ellipse Width="8" Height="8" Canvas.Left="25" Canvas.Top="75" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="25" Canvas.Top="15" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="175" Canvas.Top="15" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="175" Canvas.Top="75" Fill="red" /> </Canvas>
Здесь, для координат вспомогательных фигур заданы те же самые значения, что и для самой кривой. Но в результате все объекты "съехали" (рис. 3.4):
(рис 3.4) Координаты вспомогательных фигур совпадают с точками кривой
С учетом подбора координат вспомогательных фигур, при которых рисунок получается ровным, код будет выглядеть так:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <!--Объект Path--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="23.5" Canvas.Top="26.5" Data=" M25,75 C25,15 175,15 175,75" /> <!--Вспомогательные фигуры--> <Line X1="25" Y1="15" X2="25" Y2="75" Stroke="green" StrokeThickness="3"/> <Line X1="175" Y1="15" X2="175" Y2="75" Stroke="green" StrokeThickness="3"/> <Ellipse Width="8" Height="8" Canvas.Left="21" Canvas.Top="71" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="21" Canvas.Top="11" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="171" Canvas.Top="11" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="171" Canvas.Top="71" Fill="red" /> </Canvas>
Теперь все фигуры расположены правильно (рис. 3.5):
(рис 3.5) Координаты вспомогательных фигур изменены
Необходимость позиционировать фигуры возникает из-за того, что привязка к координатам осуществляется к верхней левой точке. В самом деле, при привязке к центральной точке и задании одинаковых координат совмещение было бы точным (рис. 3.6, А). Сейчас оно таким не является (рис.3.6 Б). Корректировать координаты окружности приходится с учетом ее радиуса (рис. 3.6, В):
(рис 3.6) Расположение фигур. А – привязка к центральной точке, Б – привязка к верхнему левому углу, В – выравнивание фигур с привязкой к центральной точке
Подобное выравнивание довольно усложняет картину, делая понимание взаимного расположения фигур довольно кропотливой задачей. Поэтому в последующих примерах XAML-код для вспомогательных фигур не указывается. Однако соответствующие изображения с опорными точками приводятся.
| № | Код | Вид в браузере |
|---|---|---|
| 3.4.1 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 C25,15 175,15 175,75" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
||
| Описание | ||
| В начале задается опорная точка M 25, 75. Далее указывaются две контрольные точки 25, 15 и 175, 15, а затем конечная точка 175,75. | ||
| № | Код | Вид в браузере |
| 3.4.2 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c0,-60 150,-60 150,0" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
||
| Описание | ||
| В начале задается опорная точка M 25, 75. Далее указываются две контрольные точки 0,-60 и 150,-60, координаты которых отсчитываются относительно опорной. Затем добавляется конечная точка с координатами 150,0 также относительно опорной. | ||
| № | Код | Вид в браузере |
| 3.4.3 | <?xml version="1.0" encoding=" UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC " -//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/ SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 3. Элемент Path</title> <desc> Пример CubicCurve3.svg </desc> <!--Объект Path--> <path d="M25,75 C5,15 195,15 175,75" style="fill:none; stroke: green;stroke-width:3"/> <!--Вспомогательные фигуры--> <line x1="5" y1="15" x2=" 25" y2="75" stroke-width="3" stroke="green" /> <line x1="195" y1="15" x2="175" y2=" 75" stroke-width=" 3" stroke="green" /> <circle cx="25" cy="75" r="4" fill=" red"/> <circle cx="5" cy="15" r="4" fill=" red"/> <circle cx="195" cy="15" r="4" fill=" red"/> <circle cx="175" cy="75" r="4" fill=" red"/> </svg> |
|
| Изображение с опорными точками | ||
|
||
| Описание | ||
| Более вогнутая кривая по сравнению с фигурой из предыдущего примера. Используются абсолютные координаты (см. рис. 3.7) | ||
| № | Код | Описание |
| 3.4.4 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c-20,-60 170,-60 150,0" /> </Canvas> |
Точно такой же результат получается при использовании относительных координат. (см. рис. 3.7). |
| Изображение с опорными точками | ||
 (рис 3.7) Абсолютные и относительные координаты для примеров 3.4.3 и 3.4.4
|
||
| № | Код | Вид в браузере |
| 3.4.5 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data="M25,75 C40,15 160,15 175,75" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
||
| Описание | ||
| Более выпуклая кривая по сравнению с примером 3.4.1. Используются абсолютные координаты | ||
| № | Код | Вид в браузере |
| 3.4.6 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c15,-60 135,-60 150,0" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
||
| Описание | ||
| Точно такой же результат получается при использовании относительных координат | ||
| № | Код | Вид в браузере |
| 3.4.7 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 C40,15 160,135 175,75" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
||
| Описание | ||
| Кривая с параллельными отрезками, соединяющими опорные и контрольные точки | ||
| № | Код | Описание |
| 3.4.8 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="400" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 C25,15 175,15 175,75 S 325,135 325,75" /> </Canvas> |
После завершения кривой Безье добавляется команда S 325,135 325,75 которая использует в качестве первой контрольной точки отражение последней точки 175,15 предыдущей команды (см. рис. 3.8) |
| Вид в браузере | ||
|
||
| Изображение с опорными точками | ||
 (рис 3.8) Команда S 325,135 325,75
|
||
| № | Код | Описание |
| 3.4.9 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="400" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c0,-60 150,-60 150,0 s 150,60 150,0" /> </Canvas> |
Здесь получается та же самая фигура, что и в предыдущем примере, но с использованием относительных координат. Для команды c0,-60 150,-60 150,0 началом отсчета является первая опорная точка, для команды s 150,60 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой. (рис. 3.9) |
| Вид в браузере | ||
|
||
| Изображение с опорными точками | ||
 (рис 3.9) Абсолютные и относительные координаты для примеров 3.4.8 и 3.4.9
|
||
| № | Код | Описание |
| 3.4.10 | <Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="400" Height="200"
Background="White"
x:Name="Page">
<Path Stroke="green"
StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint=
"25,75">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment
Point1="25,15"
Point2="175,15" Point3="
175,75" />
<BezierSegment Point1="
175,135"
Point2="325,135" Point3="
325,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
Запись кубической кривой с помощью тегов. Дополнительное описание в разделе "How to: Create a Cubic |
| Вид в браузере | ||
|
||
Кривые Безье четвертого порядка (квадратичные кривые) очень похожи на кубические, но они имеют только одну контрольную точку. Для их создания используются команды, приведенные в табл. 3.5.
| Команда | Описание | Парамеры |
|---|---|---|
| Q/q ( |
Рисование квадратичной кривой Безье от текущей точки(MX, MY) до заданной (X,Y) с контрольной точкой (X1, Y1) (рис. 3.10) | X1, Y1, X,Y |
| T/t
(Smooth |
Рисование кубической кривой Безье от текущей точки до заданной (X,Y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды | X,Y |
(рис 3.10) Рисование квадратичной кривой Безье
Наличие одной контрольной точки позволяет гораздо быстрее получать нужные кривые при написании кода.
| № | Код | Вид в браузере |
|---|---|---|
| 3.6.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 Q100,25 175,75" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| Простейшая квадратичная кривая Безье. Контрольная точка равноудалена от опорных | ||
| № | Код | Вид в браузере |
| 3.6.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data="M25,75 q75,-50 150,0" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| Точно такая же кривая, как и в предыдущем примере, но используется относительная команда | ||
| № | Код | Вид в браузере |
| 3.6.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="350" Height="150" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 Q100,25 175,75 T 325,75" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| После завершения квадратичной кривой добавляется команда T 325,75, которая использует в качестве своей контрольной точки отражение контрольной точки 100, 25 предыдущей команды (см. рис. 3.11) | ||
| № | Код | Описание |
| 3.6.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="350" Height="150" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 q75,-50 150,0 t 150,0" /> </Canvas> |
Здесь получается та же самая фигура, что и в примере 3.6.3, но с использованием относительных координат. Для команды q75,-50 150,0 началом отсчета является первая опорная точка, для команды t 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой (рис. 3.11). |
|
| Вид в браузере | ||
 (рис 3.11) Абсолютные и относительные координаты для примеров 3.6.3 и 3.6.4
|
||
| № | Код | Описание |
| 3.6.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="700" Height="150" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 Q100,25 175,75 T 325,75 T475, 75 T 625,75" /> </Canvas> |
При рисовании кривых с повторяющимися фрагментами удобно использовать команду T для упрощения кода. В данном примере все команды используют первую опорную точку M 25, 75 | |
| Вид в браузере | ||
|
||
| Изображение с опорными точками | ||
|
||
| № | Код | Описание |
| 3.6.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="700" Height="150"
Background="White"
x:Name="Page">
<Path Stroke="green"
StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure
StartPoint="25,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="100,25"
Point2="175,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint=
"175,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="250,125"
Point2="325,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint=
"325,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="400,25"
Point2="475,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint=
"475,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="550,125"
Point2="625,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
Рисование квадратичной кривой Безье при помощи тегов. См. раздел "How to: Create a |
|
| Вид в браузере | ||
|
||
Эллиптические кривые представляют собой фрагменты эллипсов (дуги). Для их создания используются команды, приведенные в табл. 3.7.
| Команда | Описание | Параметры |
|---|---|---|
| A/a (Elliptical Arc Command) | Рисование эллиптической кривой от опорной точки (MX, MY) до заданной (X,Y). Размер и ориентация эллипса задается двумя радиусами (RX, RY) и параметром rotationAngle, который определяет расположение эллипса как единого целого относительно оси X текущей координатной системы. Центр эллипса вычисляется автоматически на основании задаваемых координат точек и радиусов. Параметры isLargeArcFlag и sweepDirectionFlag определяют внешний вид эллипса (рис. 3.12) | RX, RY rotationAngle isLargeArcFlag, sweepDirectionFlag, x,y |
(рис 3.12) Рисование эллиптической кривой
В отличие от рисования кривых Безье команда эллиптической кривой содержит достаточно большое число параметров. Параметры MX, MY, X, Y, RX, RY наглядно видны, более сложно понять rotationAngle, isLargeArcFlag, sweepDirectionFlag. Рассмотрим их на примерах табл. 3.8.
| № | Код | Вид в браузере |
|---|---|---|
| 3.8.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 1,0 150,125" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| Рисование кривой, которая представляет собой ? эллипса. Значения пары isLargeArcFlag, sweepDirectionFlag: 1,0. Для формирования представления о размерах самого XAML-документа добавлена рамка | ||
| № | Код | Вид в браузере |
| 3.8.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 a50,25 0 1,0 50,25" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| Здесь получается та же самая фигура, что и в предыдущем пример, но с использованием относительных координат | ||
| № | Код | Вид в браузере |
| 3.8.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 0,1 150,125" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| Значения параметров, описывающих кривую, совпадают в точности со значениями примера 3.8.1 за исключением пары isLargeArcFlag, sweepDirectionFlag, которая здесь равна 0,1 | ||
| № | Код | Вид в браузере |
| 3.8.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 0,0 150,125" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
Значения параметров, описывающих кривую, совпадают в точности со значениями примера 3.8.1 за исключением пары isLargeArcFlag, sweepDirectionFlag, которая здесь равна 0,0 |
||
| № | Код | Вид в браузере |
| 3.8.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 1,1 150,125" /> </Canvas> |
||
|
||
| Изображение с опорными точками: | ||
|
||
| Описание | ||
| Значения параметров, описывающих кривую, совпадают в точности со значениями примера 3.8.1 за исключением пары isLargeArcFlag, sweepDirectionFlag, которая здесь равна 1,1 | ||
| № | Код | Вид в браузере |
| 4.8.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="200"
Background="White"
x:Name="Page">
<Path Stroke="green" StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,100">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="50,25"
RotationAngle="0" IsLargeArc="
True" SweepDirection="Clockwise"
Point="150,125" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
|
|
| Описание | ||
| Рисование эллиптической кривой с помощью тегов. См. Раздел "How to: Create an Elliptical Arc": http://msdn.microsoft.com/en-us/library/ms745030.aspx | ||
Рассмотренные примеры 3.8.1 - 3.8.5 позволяют сделать вывод: пара значений isLargeArcFlag, sweepDirectionFlag отвечают за то, какая часть фигуры, формируемая пересечением двух окружностей, будет видна (рис. 3.9):
(рис 3.9) Все возможные значения пары isLargeArcFlag, sweepDirectionFlag и формируемая ими кривая
Рассмотрим теперь последний "неявный" параметр RotationAngle (табл. 3.9)
| № | Код | Вид в браузере |
|---|---|---|
| 3.9.1 | <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <!--Поворот объекта Path на 10 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 10 1,0 150,125" /> <!--Поворот объекта Path на 20 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 20 1,0 150,125" /> <!--Поворот объекта Path на 30 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 30 1,0 150,125" /> <!--Поворот объекта Path на 40 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 40 1,0 150,125" /> <!--Поворот объекта Path на 50 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 50 1,0 150,125" /> <!--Исходный объект Path--> <Path Stretch="Fill" Stroke="black" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 1,0 150,125" /> <!--Вспомогательные фигуры--> <Ellipse Width="8" Height="8" Canvas.Left="98" Canvas.Top="98" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="148" Canvas.Top="123" Fill="red" /> <Ellipse Width="4" Height="4" Canvas.Left="48" Canvas.Top="98" Fill="black" /> <Rectangle Width="210" Height="190" Stroke="blue" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"/> </Canvas> |
|
| Описание | ||
В этом примере расположено несколько кривых, отличающихся только параметром RotationAngle, который принимает значения 10, 20, 30, 40 и 50 градусов. Заметен поворот всей фигуры, как единого целого, относительно горизонтальной оси против часовой стрелки. При этом сохраняется привязка к опорным точкам |
||
Мы закончили рассмотрение объекта Path. При экспорте графики в формате XAML из пакета Microsoft Expression Design большая часть получаемого кода и представляет собой описание именно этого элемента (рис. 3.10):
(рис 3.10) Экспорт графики из Microsoft Expression Design в Microsoft Expression Blend
Нарисованные при помощи инструментов кривые могут быть затем отредактированы непосредственно в режиме кода.
Объект Path позволяет создавать фигуры, к которым могут быть применены все атрибуты оформления– заливка, градиент, штриховка. Он может представлять замкнутые фигуры – такие как полигон, а также разомкнутые – такие как линия.
Фигура, образуемая объектом Path, состоит из отрезков прямых или дуг, которые строятся последовательно, от точки к точке. Для этого используются следующие команды: Move Command (M, m) (установить опорную точку), Line Command (L, l) (провести линию), Horizontal Line Command (H, h) (провести горизонтальную линию), Vertical Line Command (V, v) (провести вертикальную линию), Close Command (Z, z) (завершить построение объекта Path ), Cubic Smooth cubic (S, s) относится к команде Cubic (C, c) исходя из практических соображений. Теоретически это разные команды Smooth
(T, t) относится к команде Elliptical Arc Command (A) (провести эллиптическую кривую).
Координаты объекта задаются следующим образом:
<path d="M15,15 L185,15 Z"/>
Здесь d – атрибут, определяющий Path. Далее устанавливается опорная точка – M 15,15. От этой опорной точки проводится линии к точке с координатами 185, 15. Команда Z завершает рисование объекта – при этом происходит возврат к опорной точке.
Различают абсолютные и относительные команды. При работе с абсолютными командами все координаты задаются в системе рисунка, т.е. начало отсчета располагается в верхнем левом углу документа. (рис. 3.1, A).
(рис 3.1) Абсолютная (А) и относительная команда (Б).
Соответствующие координаты называются абсолютными. Однако необходимо учитывать, что вся фигура, как единое целое, может быть смещена при помощи задания других атрибутов объекта. При проведении линии L 185,15 происходит перемещение в точку, лежащую правее опорной точки на 170 пикселей (рис. 3.1,Б). Ординаты у них равные. Следовательно, можно рассматривать опорную точку в качестве точки начала отсчета и записывать перемещение так:
<path d="M15,15 l170,0 z"/>
Это относительная запись команды – ее название ( Line Command ) указывается строчной буквой. Если фигура состоит из нескольких точек, то при относительной форме записи каждая предыдущая точка становится точкой отсчета для последующей команды. Соответствующие этому случаю координаты называются относительными.
Для атрибута d справедливы следующие правила:
<path d="M15,15L185,15Z">
<path d="M15 15 L 185 15 Z">
<path d="M15,15 L185,15 185,85 15,85 Z"> – эквивалентная запись: <path d="M15,15 L185,15 L185,85 L15,85 Z">
<path d="M0,0 L .5.6 Z"/> – эквивалентная запись: <path d="M0,0 L 0.5, 0.6 Z"/>
Эти правила предназначены для сокращения размера кода. Для удобства визуального восприятия, однако, мы далее будем применять самую понятную форму записи – с разделением запятыми пар координат и с пробелами:
<path d="M15,15 L185,15 Z"/>
Группа команд для рисования линий и форм – самая простая группа объекта Path. В этом случае создаваемые линии представляют собой отрезки прямых, заключенных заданными точками. В табл. 3.1 приводится описание команд.
| Команда | Описание | Параметры |
|---|---|---|
| M/m (Move Command) | Установка точки отсчета. Следующие команды будут использовать эту точку в качестве опорной | Координаты (x, y) опорной точки |
| L/l(Line Command) | Рисование линии от текущей точки до заданной | Координаты (x, y) заданной точки. Добавляемая точка становится опорной |
| H/h (Horizontal Line Command) | Рисование горизонтальной линии от текущей точки до заданной | Координата x заданной точки. Координата y будет равна ординате текущей точки. Добавляемая точка становится опорной |
| V/v (Vertical Line Command) | Рисование вертикальной линии от текущей точки до заданной | Координата y заданной точки. Координата x будет равна абсциссе текущей точки. Добавляемая точка становится опорной |
| Z/z(closePath) | Завершение рисования линии от опорной точки | Без параметров |
При работе с большим количеством точек, более удобным представляется использование относительных команд.
| № | Код | Вид в браузере |
|---|---|---|
| 3.2.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" C anvas.Top="15" Data=" M15,15 L185,15 L185,85 L15,85 Z" /> </Canvas> |
|
|
| Описание | ||
В начале задается опорная точка M 15,15. От нее проводится линия в точку с координатами L 185,15. Далее добавляются еще две линии – L185,85 и L 15,85. Команда Z завершает объект Path, соединяя отрезком точку 15,185 с опорной точкой |
||
| № | Код | Вид в браузере |
| 3.2.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" Canvas.Top="15" Data=" M15,15 l170,0 L185,85 l-170,0 z" /> </Canvas> |
|
|
| Описание | ||
| В начале задается опорная точка M 15,15. От нее проводится линия в точку, с той же самой ординатой и лежащей правее на 170 пикселей при помощи относительной команды l 170, 0. Далее при помощи абсолютной команды L 185,85 добавляется линия. Точка с координатами 185, 85 становится точкой начала отсчета. От нее проводится линия в точку, с той же самой ординатой и лежащей левее на 170 пикселей. Следовательно, теперь команда будет принимать отрицательную абсциссу: l-170,0 Относительная команда z завершает объект Path, соединяя отрезком последнюю точку с опорной. | ||
| № | Код | Вид в браузере |
| 3.2.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" Canvas.Top="15" Data=" M15,15 H185 M185,15 V85 M185,85 H15 M15,85 V15" /> </Canvas> |
|
|
| Описание | ||
| В начале задается опорная точка M 15,15. От нее проводится горизонтальная линия в точку 185, 15 при помощи команды H 185, причем в качестве ординаты берется соответствующее значение опорной точки. Далее устанавливается новая опорная точка M 185, 15 и от нее проводится вертикальная линия V85, теперь в качестве абсциссы берется соответствующее значение новой опорной точки. Снова добавляется опорная точка M 185,85, проводится горизонтальная линия H15. Наконец, добавляется последняя опорная точка M 15, 85 и вертикальная линия V15 соединяет ее с исходной точкой | ||
| № | Код | Вид в браузере |
| 3.2.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="blue" StrokeThickness="3" Canvas.Left="15" Canvas.Top="15" Data=" M15,15 h170 M185,15 v70 M185,85 h-170 M15,85 v-70" /> </Canvas> |
|
|
| Описание | ||
При использовании относительных команд каждая добавляемая опорная точка становится началом отсчета. В этом примере четыре пары "опорная точка – относительная команда":1) M15,15 h170 2) M185,15 v70 3) M185,85 h-170 4) M15,85 v-70 |
||
| № | Код | Вид в браузере |
| 3.2.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Fill="red" Canvas.Left="75" Canvas.Top="10" Data="M100,10 L105.8,27.2 123.8,27.2 109.4,38 114.6,55.2 100,45 85.4,55.2 90.6,38 76.2,27.2 94.2,27.2 " /> </Canvas> |
|
|
| Описание | ||
В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Исходные координаты взяты из примера второй Лекции |
||
| № | Код | Вид в браузере |
| 3.2.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Path Fill="red">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="
100,10">
<LineSegment Point="
105.8,27.2" />
<LineSegment Point="
123.8,27.2" />
<LineSegment Point="
109.4,38" />
<LineSegment Point="
114.6,55.2" />
<LineSegment Point="
100,45" />
<LineSegment Point="
85.4,55.2" />
<LineSegment Point="
90.6,38" />
<LineSegment Point="
76.2,27.2" />
<LineSegment Point="
94.2,27.2" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
|
|
| Описание | ||
| Представление фигуры в виде набора тегов. См. раздел " PathGeometry Class": http://msdn.microsoft.com/en-us/library/system.windows.media.pathgeometry.aspx | ||
| № | Код | Вид в браузере |
| 3.2.7 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Fill="dodgerblue" Stroke="blue" StrokeThickness="5" Canvas.Left="75" Canvas.Top="10" Data="M100,10 L121.6,22.5 121.6,47.5 100,60 78.4,47.52 78.4,22.5 Z" /> </Canvas> |
|
|
| Описание | ||
| В начале задается опорная точка M 100, 10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Для завершения фигуры добавляется команда Z (сравните вид фигуры без этой команды). Исходные координаты взяты из примера второй лекции. | ||
| № | Код | Вид в браузере |
| 3.2.8 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Fill="dodgerblue" Stroke="blue" StrokeThickness="5"> <Path.Data> <PathGeometry> <PathFigure StartPoint="100,10"> <LineSegment Point="121.6,22.5" /> <LineSegment Point="121.6,47.5" /> <LineSegment Point="100,60" /> <LineSegment Point="78.4,47.52" /> <LineSegment Point="78.4,22.5" /> <LineSegment Point="100,10" /> </PathFigure> </PathGeometry> </Path.Data> </Path> </Canvas> |
|
|
| Описание | ||
| Представление фигуры в виде набора тегов. Для завершения штриховки фигуры добавлена еще один сегмент <LineSegment Point="100,10" />. При увеличении заметна зазубрина, возникающая в узле опорной точки (рис 3.2(рис 3.2) Увеличенное изображение фигуры Для устранения этого недостатка можно добавить еще один сегмент. | ||
Кривые
| Команда | Описание | Параметры |
|---|---|---|
| C/c (Cubic |
Рисование кубической кривой Безье от текущей точки (MX, MY) до заданной (X,Y) с начальной контрольной точкой (X1, Y1) и конечной (X2, Y2) (рис. 3.3) | X1, Y1, X2, Y2, X,Y |
| S/s
(Smooth cubic |
Рисование кубической кривой Безье от текущей точки (MX, MY) до заданной (X,Y). Начальная контрольная точка представляет собой отражение конечной контрольной точки предыдущей команды. Для конечной контрольной точки задаются координаты (X2, Y2) | X2, Y2 X,Y |
(рис 3.3) Рисование кубической кривой Безье
На рис. 3.3кроме самой кривой, изображены вспомогательные опорные точки и линии. Добавление подобных иллюстраций связано с некоторыми сложностями. Рассмотрим следующий фрагмент кода:
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <!--Объект Path--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data="M25,75 C25,15 175,15 175,75" /> <!--Вспомогательные фигуры--> <Line X1="25" Y1="15"X2="25" Y2="75" Stroke="green" StrokeThickness="3"/> <Line X1="175" Y1="15" X2="175" Y2="75" Stroke="green" StrokeThickness="3"/> <Ellipse Width="8" Height="8" Canvas.Left="25" Canvas.Top="75" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="25" Canvas.Top="15" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="175" Canvas.Top="15" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="175" Canvas.Top="75" Fill="red" /> </Canvas>
Здесь, для координат вспомогательных фигур заданы те же самые значения, что и для самой кривой. Но в результате все объекты "съехали" (рис. 3.4):
(рис 3.4) Координаты вспомогательных фигур совпадают с точками кривой
С учетом подбора координат вспомогательных фигур, при которых рисунок получается ровным, код будет выглядеть так:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <!--Объект Path--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="23.5" Canvas.Top="26.5" Data=" M25,75 C25,15 175,15 175,75" /> <!--Вспомогательные фигуры--> <Line X1="25" Y1="15" X2="25" Y2="75" Stroke="green" StrokeThickness="3"/> <Line X1="175" Y1="15" X2="175" Y2="75" Stroke="green" StrokeThickness="3"/> <Ellipse Width="8" Height="8" Canvas.Left="21" Canvas.Top="71" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="21" Canvas.Top="11" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="171" Canvas.Top="11" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="171" Canvas.Top="71" Fill="red" /> </Canvas>
Теперь все фигуры расположены правильно (рис. 3.5):
(рис 3.5) Координаты вспомогательных фигур изменены
Необходимость позиционировать фигуры возникает из-за того, что привязка к координатам осуществляется к верхней левой точке. В самом деле, при привязке к центральной точке и задании одинаковых координат совмещение было бы точным (рис. 3.6, А). Сейчас оно таким не является (рис.3.6 Б). Корректировать координаты окружности приходится с учетом ее радиуса (рис. 3.6, В):
(рис 3.6) Расположение фигур. А – привязка к центральной точке, Б – привязка к верхнему левому углу, В – выравнивание фигур с привязкой к центральной точке
Подобное выравнивание довольно усложняет картину, делая понимание взаимного расположения фигур довольно кропотливой задачей. Поэтому в последующих примерах XAML-код для вспомогательных фигур не указывается. Однако соответствующие изображения с опорными точками приводятся.
| № | Код | Вид в браузере |
|---|---|---|
| 3.4.1 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 C25,15 175,15 175,75" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
|
||
| Описание | ||
| В начале задается опорная точка M 25, 75. Далее указывaются две контрольные точки 25, 15 и 175, 15, а затем конечная точка 175,75. | ||
| № | Код | Вид в браузере |
| 3.4.2 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c0,-60 150,-60 150,0" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
|
||
| Описание | ||
| В начале задается опорная точка M 25, 75. Далее указываются две контрольные точки 0,-60 и 150,-60, координаты которых отсчитываются относительно опорной. Затем добавляется конечная точка с координатами 150,0 также относительно опорной. | ||
| № | Код | Вид в браузере |
| 3.4.3 | <?xml version="1.0" encoding=" UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC " -//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/ SVG/1.1/DTD/svg11.dtd"> <svg width="210" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <title>Лекция 3. Элемент Path</title> <desc> Пример CubicCurve3.svg </desc> <!--Объект Path--> <path d="M25,75 C5,15 195,15 175,75" style="fill:none; stroke: green;stroke-width:3"/> <!--Вспомогательные фигуры--> <line x1="5" y1="15" x2=" 25" y2="75" stroke-width="3" stroke="green" /> <line x1="195" y1="15" x2="175" y2=" 75" stroke-width=" 3" stroke="green" /> <circle cx="25" cy="75" r="4" fill=" red"/> <circle cx="5" cy="15" r="4" fill=" red"/> <circle cx="195" cy="15" r="4" fill=" red"/> <circle cx="175" cy="75" r="4" fill=" red"/> </svg> |
|
| Изображение с опорными точками | ||
|
|
||
| Описание | ||
| Более вогнутая кривая по сравнению с фигурой из предыдущего примера. Используются абсолютные координаты (см. рис. 3.7) | ||
| № | Код | Описание |
| 3.4.4 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c-20,-60 170,-60 150,0" /> </Canvas> |
Точно такой же результат получается при использовании относительных координат. (см. рис. 3.7). |
| Изображение с опорными точками | ||
| (рис 3.7) Абсолютные и относительные координаты для примеров 3.4.3 и 3.4.4
|
||
| № | Код | Вид в браузере |
| 3.4.5 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data="M25,75 C40,15 160,15 175,75" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
|
||
| Описание | ||
| Более выпуклая кривая по сравнению с примером 3.4.1. Используются абсолютные координаты | ||
| № | Код | Вид в браузере |
| 3.4.6 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c15,-60 135,-60 150,0" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
|
||
| Описание | ||
| Точно такой же результат получается при использовании относительных координат | ||
| № | Код | Вид в браузере |
| 3.4.7 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 C40,15 160,135 175,75" /> </Canvas> |
|
| Изображение с опорными точками | ||
|
|
||
| Описание | ||
| Кривая с параллельными отрезками, соединяющими опорные и контрольные точки | ||
| № | Код | Описание |
| 3.4.8 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="400" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 C25,15 175,15 175,75 S 325,135 325,75" /> </Canvas> |
После завершения кривой Безье добавляется команда S 325,135 325,75 которая использует в качестве первой контрольной точки отражение последней точки 175,15 предыдущей команды (см. рис. 3.8) |
| Вид в браузере | ||
|
|
||
| Изображение с опорными точками | ||
| (рис 3.8) Команда S 325,135 325,75
|
||
| № | Код | Описание |
| 3.4.9 | <Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="400" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 c0,-60 150,-60 150,0 s 150,60 150,0" /> </Canvas> |
Здесь получается та же самая фигура, что и в предыдущем примере, но с использованием относительных координат. Для команды c0,-60 150,-60 150,0 началом отсчета является первая опорная точка, для команды s 150,60 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой. (рис. 3.9) |
| Вид в браузере | ||
|
|
||
| Изображение с опорными точками | ||
| (рис 3.9) Абсолютные и относительные координаты для примеров 3.4.8 и 3.4.9
|
||
| № | Код | Описание |
| 3.4.10 | <Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="400" Height="200"
Background="White"
x:Name="Page">
<Path Stroke="green"
StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint=
"25,75">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment
Point1="25,15"
Point2="175,15" Point3="
175,75" />
<BezierSegment Point1="
175,135"
Point2="325,135" Point3="
325,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
Запись кубической кривой с помощью тегов. Дополнительное описание в разделе "How to: Create a Cubic |
| Вид в браузере | ||
|
|
||
Кривые Безье четвертого порядка (квадратичные кривые) очень похожи на кубические, но они имеют только одну контрольную точку. Для их создания используются команды, приведенные в табл. 3.5.
| Команда | Описание | Парамеры |
|---|---|---|
| Q/q ( |
Рисование квадратичной кривой Безье от текущей точки(MX, MY) до заданной (X,Y) с контрольной точкой (X1, Y1) (рис. 3.10) | X1, Y1, X,Y |
| T/t
(Smooth |
Рисование кубической кривой Безье от текущей точки до заданной (X,Y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды | X,Y |
(рис 3.10) Рисование квадратичной кривой Безье
Наличие одной контрольной точки позволяет гораздо быстрее получать нужные кривые при написании кода.
| № | Код | Вид в браузере |
|---|---|---|
| 3.6.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 Q100,25 175,75" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| Простейшая квадратичная кривая Безье. Контрольная точка равноудалена от опорных | ||
| № | Код | Вид в браузере |
| 3.6.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data="M25,75 q75,-50 150,0" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| Точно такая же кривая, как и в предыдущем примере, но используется относительная команда | ||
| № | Код | Вид в браузере |
| 3.6.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="350" Height="150" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 Q100,25 175,75 T 325,75" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| После завершения квадратичной кривой добавляется команда T 325,75, которая использует в качестве своей контрольной точки отражение контрольной точки 100, 25 предыдущей команды (см. рис. 3.11) | ||
| № | Код | Описание |
| 3.6.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="350" Height="150" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 q75,-50 150,0 t 150,0" /> </Canvas> |
Здесь получается та же самая фигура, что и в примере 3.6.3, но с использованием относительных координат. Для команды q75,-50 150,0 началом отсчета является первая опорная точка, для команды t 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой (рис. 3.11). |
|
| Вид в браузере | ||
| (рис 3.11) Абсолютные и относительные координаты для примеров 3.6.3 и 3.6.4
|
||
| № | Код | Описание |
| 3.6.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/ client/2007" xmlns:x="http://schemas.microsoft.com/ winfx/2006/xaml" Width="700" Height="150" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="25" Canvas.Top="25" Data=" M25,75 Q100,25 175,75 T 325,75 T475, 75 T 625,75" /> </Canvas> |
При рисовании кривых с повторяющимися фрагментами удобно использовать команду T для упрощения кода. В данном примере все команды используют первую опорную точку M 25, 75 | |
| Вид в браузере | ||
|
|
||
| Изображение с опорными точками | ||
|
|
||
| № | Код | Описание |
| 3.6.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="700" Height="150"
Background="White"
x:Name="Page">
<Path Stroke="green"
StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure
StartPoint="25,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="100,25"
Point2="175,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint=
"175,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="250,125"
Point2="325,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint=
"325,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="400,25"
Point2="475,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint=
"475,75" >
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment
Point1="550,125"
Point2="625,75" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
Рисование квадратичной кривой Безье при помощи тегов. См. раздел "How to: Create a |
|
| Вид в браузере | ||
|
|
||
Эллиптические кривые представляют собой фрагменты эллипсов (дуги). Для их создания используются команды, приведенные в табл. 3.7.
| Команда | Описание | Параметры |
|---|---|---|
| A/a (Elliptical Arc Command) | Рисование эллиптической кривой от опорной точки (MX, MY) до заданной (X,Y). Размер и ориентация эллипса задается двумя радиусами (RX, RY) и параметром rotationAngle, который определяет расположение эллипса как единого целого относительно оси X текущей координатной системы. Центр эллипса вычисляется автоматически на основании задаваемых координат точек и радиусов. Параметры isLargeArcFlag и sweepDirectionFlag определяют внешний вид эллипса (рис. 3.12) | RX, RY rotationAngle isLargeArcFlag, sweepDirectionFlag, x,y |
(рис 3.12) Рисование эллиптической кривой
В отличие от рисования кривых Безье команда эллиптической кривой содержит достаточно большое число параметров. Параметры MX, MY, X, Y, RX, RY наглядно видны, более сложно понять rotationAngle, isLargeArcFlag, sweepDirectionFlag. Рассмотрим их на примерах табл. 3.8.
| № | Код | Вид в браузере |
|---|---|---|
| 3.8.1 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 1,0 150,125" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| Рисование кривой, которая представляет собой ? эллипса. Значения пары isLargeArcFlag, sweepDirectionFlag: 1,0. Для формирования представления о размерах самого XAML-документа добавлена рамка | ||
| № | Код | Вид в браузере |
| 3.8.2 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 a50,25 0 1,0 50,25" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| Здесь получается та же самая фигура, что и в предыдущем пример, но с использованием относительных координат | ||
| № | Код | Вид в браузере |
| 3.8.3 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 0,1 150,125" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| Значения параметров, описывающих кривую, совпадают в точности со значениями примера 3.8.1 за исключением пары isLargeArcFlag, sweepDirectionFlag, которая здесь равна 0,1 | ||
| № | Код | Вид в браузере |
| 3.8.4 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 0,0 150,125" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
Значения параметров, описывающих кривую, совпадают в точности со значениями примера 3.8.1 за исключением пары isLargeArcFlag, sweepDirectionFlag, которая здесь равна 0,0 |
||
| № | Код | Вид в браузере |
| 3.8.5 | ||
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 1,1 150,125" /> </Canvas> |
||
|
|
||
| Изображение с опорными точками: | ||
|
|
||
| Описание | ||
| Значения параметров, описывающих кривую, совпадают в точности со значениями примера 3.8.1 за исключением пары isLargeArcFlag, sweepDirectionFlag, которая здесь равна 1,1 | ||
| № | Код | Вид в браузере |
| 4.8.6 | ||
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="200"
Background="White"
x:Name="Page">
<Path Stroke="green" StrokeThickness="3">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,100">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="50,25"
RotationAngle="0" IsLargeArc="
True" SweepDirection="Clockwise"
Point="150,125" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
|
|
|
| Описание | ||
| Рисование эллиптической кривой с помощью тегов. См. Раздел "How to: Create an Elliptical Arc": http://msdn.microsoft.com/en-us/library/ms745030.aspx | ||
Рассмотренные примеры 3.8.1 - 3.8.5 позволяют сделать вывод: пара значений isLargeArcFlag, sweepDirectionFlag отвечают за то, какая часть фигуры, формируемая пересечением двух окружностей, будет видна (рис. 3.9):
(рис 3.9) Все возможные значения пары isLargeArcFlag, sweepDirectionFlag и формируемая ими кривая
Рассмотрим теперь последний "неявный" параметр RotationAngle (табл. 3.9)
| № | Код | Вид в браузере |
|---|---|---|
| 3.9.1 | <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="220" Height="200" Background="White" x:Name="Page"> <!--Поворот объекта Path на 10 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 10 1,0 150,125" /> <!--Поворот объекта Path на 20 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 20 1,0 150,125" /> <!--Поворот объекта Path на 30 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 30 1,0 150,125" /> <!--Поворот объекта Path на 40 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 40 1,0 150,125" /> <!--Поворот объекта Path на 50 градусов--> <Path Stretch="Fill" Stroke="green" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 50 1,0 150,125" /> <!--Исходный объект Path--> <Path Stretch="Fill" Stroke="black" StrokeThickness="3" Canvas.Left="50" Canvas.Top="100" Data=" M100,100 A50,25 0 1,0 150,125" /> <!--Вспомогательные фигуры--> <Ellipse Width="8" Height="8" Canvas.Left="98" Canvas.Top="98" Fill="red" /> <Ellipse Width="8" Height="8" Canvas.Left="148" Canvas.Top="123" Fill="red" /> <Ellipse Width="4" Height="4" Canvas.Left="48" Canvas.Top="98" Fill="black" /> <Rectangle Width="210" Height="190" Stroke="blue" StrokeThickness="2" Canvas.Left="5" Canvas.Top="5"/> </Canvas> |
|
| Описание | ||
В этом примере расположено несколько кривых, отличающихся только параметром RotationAngle, который принимает значения 10, 20, 30, 40 и 50 градусов. Заметен поворот всей фигуры, как единого целого, относительно горизонтальной оси против часовой стрелки. При этом сохраняется привязка к опорным точкам |
||
Мы закончили рассмотрение объекта Path. При экспорте графики в формате XAML из пакета Microsoft Expression Design большая часть получаемого кода и представляет собой описание именно этого элемента (рис. 3.10):
(рис 3.10) Экспорт графики из Microsoft Expression Design в Microsoft Expression Blend
Нарисованные при помощи инструментов кривые могут быть затем отредактированы непосредственно в режиме кода.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.