Академия Microsoft:

Основы XAML
[+]
Опубликован: 23.01.2009 | Доступ: свободный | Студентов: 1539 / 149 | Оценка: 4.33 / 4.22 | Длительность: 13:08:00
Темы: Компьютерная графика, Программирование
Специальности: Программист
Теги: bezier curve, condenser, deep zoom, deep zoom composer, javascript, microsoft word, miter, monotype, nonzero, quadratic, silverlight, анимация, браузеры, вертикальный порядок, видео, графика, интерфейсы, приложения, радиальный градиент, редакторы, форматы, цвета, элементы
Лекция 2:

Основные фигуры SVG – графики
A
|
версия для печати
< Лекция 1 || Лекция 2: 12345678 || Лекция 3 >

Группы в WPF

Рассмотрим теперь эту же самую группу меню "Object \ Combine" применительно к WPF-приложениям (рис. 2.21):

Группа "Object \ Combine".

увеличить изображение
Рис. 2.21. Группа "Object \ Combine".

При использовании визуальных средств каждый из пунктов этого меню по-прежнему преобразовывает исходные фигуры в объект Path. Результат определяются следующим образом (рис. 2.22):

1. – Фигуры до объединения, 2. – Объединение (Unite (Union)), 3. – Деление (Divide (-)), 4. – Пересечение (Intersect (Intersect)), 5. – Удаление совмещенного (Exclude Overlap (Xor)), 6. – Вычитание (Subtract (Exclude)).

увеличить изображение
Рис. 2.22. 1. – Фигуры до объединения, 2. – Объединение (Unite (Union)), 3. – Деление (Divide (-)), 4. – Пересечение (Intersect (Intersect)), 5. – Удаление совмещенного (Exclude Overlap (Xor)), 6. – Вычитание (Subtract (Exclude)).

Однако в WPF-приложениях имеется синтаксис, позволяющий получать тот же самый результат в виде читабельного кода. Такие примеры приводятся в табл. 2.7.

Таблица 2.7. Группы в WPF
№ Код Вид в браузере
2.7.1
<Window
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Исходные фигуры"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Ellipse Width="100" 
Height="100" 
Stroke="Black" StrokeThickness="1"  
Fill="#2b2b2b" 
Margin="25,25,75,25" />
<Ellipse Width="100" Height="100"  
Stroke="Black" StrokeThickness="1" 
Fill="#f47419" 
Margin="75,25,25,25" />

</Grid>
</Window>

Описание
Исходные фигуры, причем оранжевый эллипс расположен над серым
№ Код Вид в браузере
2.7.2
<Window
xmlns="http://schemas.microsoft.com/winfx/
2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Union"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Path Stroke="Black" 
StrokeThickness="1" 
Fill="#f47419">
 <Path.Data>
 <CombinedGeometry GeometryCombineMode="
 Union">
  <CombinedGeometry.Geometry1>        
   <EllipseGeometry RadiusX="50" 
   RadiusY="50" Center="125,75" />
   </CombinedGeometry.Geometry1>
   <CombinedGeometry.Geometry2>
  <EllipseGeometry RadiusX="50" 
  RadiusY="50" 
  Center="75,75" />
    </CombinedGeometry.Geometry2>
  </CombinedGeometry>
</Path.Data>
</Path>
</Grid>
</Window>

Описание
Значение "Union" атрибута GeometryCombineMode
№ Код Вид в браузере
2.7.3
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/
xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Original"
Width="215" Height="200">
<Grid x:Name="LayoutRoot">
<Path Margin="25,32,24,32" 
Fill="#f47419" Stretch="Fill" 
Stroke="Black" StrokeThickness="1" 
Data="M100,0.5 C127.3381,0.49999893 
149.5,22.661904 149.5,49.999999 
C149.5,77.338096 127.3381,99.499999 100,
99.499999 C90.869587,99.499999 82.316544,
97.027984 75,92.671836 89.669403,84.1193 
99.5,68.207679 99.5,49.999999 99.5,
31.792319 89.669403,15.880696 75,7.3281606 
C82.316544,2.9720165 90.869587,0.49999893 
100,0.5 z M75,7.3281606 C89.669403,15.880696 
99.5,31.792319 99.5,49.999999 99.5,68.207679 
89.669403,84.1193 75,92.671836 C60.330596,
84.1193 50.5,68.207679 50.5,49.999999 C50.5,
31.792319 60.330596,15.880696 75,7.3281606 z 
M49.999999,0.5 C59.130414,0.49999893 
67.683458,2.9720165 75,7.3281606 C60.330596,
15.880696 50.5,31.792319 50.5,49.999999 
C50.5,68.207679 60.330596,84.1193 75,
92.671836 C67.683458,97.027984 59.130414,
99.499999 49.999999,99.499999 22.661905,
99.499999 0.5,77.338096 0.5,49.999999 0.5,
22.661904 22.661905,0.49999893 49.999999,
0.5 z"/>
</Grid>
</Window>

Описание
Для значения "Divide" пункта меню нет программного аналога. Здесь мы в визуальном режиме выбрали этот пункт, а среда сгенерировала объект Path
№ Код Вид в браузере
2.7.4
<Window
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Intersect"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Path Stroke="Black" StrokeThickness="1"
Fill="#f47419">
 <Path.Data>
    <CombinedGeometry GeometryCombineMode="Intersect">
     <CombinedGeometry.Geometry1>        
      <EllipseGeometry RadiusX="50" 
      RadiusY="50" Center="125,75" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
   <EllipseGeometry RadiusX="50" 
   RadiusY="50" Center="75,75" />
     </CombinedGeometry.Geometry2>
   </CombinedGeometry>
 </Path.Data>
</Path>
</Grid>
</Window>

Описание
Значение "Intersect" атрибута GeometryCombineMode
№ Код Вид в браузере
2.7.5
<Window
xmlns="http://schemas.microsoft.com/winfx/
2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Xor"
Width="215" Height="200">
<Grid x:Name="LayoutRoot">
<Path Stroke="Black" StrokeThickness="1" 
Fill="#f47419">
 <Path.Data>
    <CombinedGeometry GeometryCombineMode="Xor">
     <CombinedGeometry.Geometry1>        
      <EllipseGeometry RadiusX="50" 
      RadiusY="50" Center="125,75" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
   <EllipseGeometry RadiusX="50" 
   RadiusY="50" Center="75,75" />
     </CombinedGeometry.Geometry2>
   </CombinedGeometry>
 </Path.Data>
</Path>
</Grid>
</Window>

Описание
Значение "Xor" атрибута GeometryCombineMode
№ Код Вид в браузере
2.7.6
<Window
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
x:Class="Group_WPF.Window1"
x:Name="Window"
Title="Exclude"
Width="215" Height="200">

<Grid x:Name="LayoutRoot">
<Path Stroke="Black" StrokeThickness="1" 
Fill="#f47419">
 <Path.Data>
    <CombinedGeometry GeometryCombineMode="Exclude">
     <CombinedGeometry.Geometry1>        
      <EllipseGeometry RadiusX="50" 
      RadiusY="50" Center="125,75" />
     </CombinedGeometry.Geometry1>
     <CombinedGeometry.Geometry2>
   <EllipseGeometry RadiusX="50" RadiusY="50"
   Center="75,75" />
     </CombinedGeometry.Geometry2>
   </CombinedGeometry>
 </Path.Data>
</Path>
</Grid>
</Window>

Описание
Значение "Exclude" атрибута GeometryCombineMode

Мы видим, что в WPF-приложениях можно формировать фигуры с помощью возможностей, которые всегда были особенностями графических пакетов, например, таких как CorelDRAW (рис. 2.23):

Объединение фигур в пакете CorelDRAW с помощью группы меню "Arrange \ Shaping".

Рис. 2.23. Объединение фигур в пакете CorelDRAW с помощью группы меню "Arrange \ Shaping".
Дальше >>
< Лекция 1 || Лекция 2: 12345678 || Лекция 3 >

Вопросы и ответы

вопросов: 0