НОУ ИНТУИТ | Основы XAML. Лекция 2: Основные фигуры SVG

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

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

|

Вам нравится? Нравится 21 студенту

| Поделиться |

Поддержать программу

Эллипс (Ellipse).

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

Рис. 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):

Рис. 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>
	Описание
	Линия с заданием цвета и толщины