Спонсор: Microsoft
Опубликован: 23.01.2009 | Уровень: для всех | Доступ: платный
Лекция 2:

Основные фигуры SVG – графики

Эллипс (Ellipse).

Для создания эллипсов используется одноименный элемент Ellipse (рис. 2.3):

Элемент Ellipse

Рис. 2.3. Элемент Ellipse

Атрибуты Canvas.Left и Canvas.Top определяют координаты верхнего левого угла фигуры, образуемой пересечением касательных к эллипсу. Атрибуты Width и Height определяют длины горизонтальной и вертикальной осей соответственно. По умолчанию фигура заливается белым цветом.

Определение расположения фигуры, реализованное с привязкой к верхней левой точке, сопряжено с некоторыми сложностями. На практике чаще всего задача расположить эллипс с центром в заданной точке. Впрочем, определить координаты центра не составляет никакого труда, например, для рассматриваемого случая, с учетом размеров 200*100 пикселей элемента Canvas схема будет выглядеть так (рис. 2.4):

Вычисление координат центра эллипса

увеличить изображение
Рис. 2.4. Вычисление координат центра эллипса

Координаты центра получаются прибавлением половины значений ширины и высоты к соответствующим значениям координат верхнего левого угла фигуры.

Для получения окружности в XAML-графике используется элемент Ellipse с одинаковыми значениями ширины и высоты.

В табл. 2.2приводятся различные примеры элемента ellipse.

Таблица 2.2. Элемент эллипс (Ellipse)
Код Вид в браузере
2.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">
  <Ellipse Width="120" Height="80" 
  Fill="#FFFFFFFF" Stroke="#FF000000" 
  Canvas.Left="40" Canvas.Top="10" />
</Canvas>

Описание
Эллипс с минимумом атрибутов. По умолчанию заливается белым цветом
Код Вид в браузере
2.2.2
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="100"
  Background="Yellow"
  x:Name="Page">
  <Ellipse Width="120" Height="80" 
  Stroke="orange" Canvas.Left="40" 
  Canvas.Top="10" StrokeThickness="4" />

</Canvas>

Описание
Эллипс с контуром и без заливки, т.е. с прозрачной внутренней областью
Код Вид в браузере
2.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">
  <Ellipse Width="120" Height="80" 
  Canvas.Left="40" Canvas.Top="10" 
  Fill="indigo" />

</Canvas>

Описание
Эллипс с заливкой и без контура
Код Вид в браузере
2.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">
  <Ellipse Width="120" Height="80" 
  Canvas.Left="40" Canvas.Top="10" 
  Fill="lightpink" Stroke="lightcoral" 
  StrokeThickness="4"  />

</Canvas>

Описание
Эллипс с контуром и заливкой
Код Вид в браузере
2.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">
  <Ellipse Width="80" Height="80"
   Canvas.Left="60" Canvas.Top="10" 
   Fill="lightpink" Stroke="lightcoral" 
   StrokeThickness="4"  />

</Canvas>

Описание
Окружность, получаемая заданием одинаковых значений Width и Height

Линия (Line).

Один из самых простых элементов XAML – графики это линия, отрезок прямой, заключенной между двумя точками. Для ее создания задаются координаты начальной и конечной точек (рис. 2.5):

Элемент Line

Рис. 2.5. Элемент Line

По умолчанию, без задания атрибута StrokeThickness, рисуется линия толщиной в 1 пиксель. В табл. 2.3. приводятся различные примеры элемента line.

Таблица 2.3. Элемент линия (Line)
Код Вид в браузере
2.3.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">

<Line  X1="20" Y1="10" X2="190" 
Y2="90" Stroke="black"/>   

</Canvas>

Описание
Линия с минимумом атрибутов. По умолчанию черного цвета толщиной 1 пикс
Код Вид в браузере
2.3.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">

<Line  X1="20" Y1="10" X2="190" 
Y2="90" Stroke="black" StrokeThickness="1"/>   

</Canvas>

Описание
Линия с заданием цвета и толщины. Приведенное значение атрибута StrokeThickness совпадает с принятым по умолчанию
Код Вид в браузере
2.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">

<Line  X1="20" Y1="10" X2="190" 
Y2="90" Stroke="tomato" StrokeThickness="
10"/>   

</Canvas>

Описание
Линия с заданием цвета и толщины
Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина