Академия 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, анимация, браузеры, вертикальный порядок, видео, графика, интерфейсы, приложения, радиальный градиент, редакторы, форматы, цвета, элементы
Лекция 5:

Рисование
A
|
версия для печати
< Лекция 4 || Лекция 5: 12345678 || Лекция 6 >

Элемент Clip

Элемент Clip предназначен для отсекания заданной областью части изображения. Этот инструмент хорошо знаком пользователям графических программ, например, в Adobe Photoshop для таких задач имеются специальные инструменты (рис. 5.5):

Инструмент горизонтальный текст-маска в программе Adobe Photoshop

увеличить изображение
Рис. 5.5. Инструмент горизонтальный текст-маска в программе Adobe Photoshop

Код для элемента Clip выглядит так:

<Image Width="291" Height="195" 
Source="sea2.jpg" Stretch="Fill" >
   <Image.Clip>
      <EllipseGeometry Center="150,100" 
RadiusX="90" RadiusY="90" />
    </Image.Clip>
</Image>

Внутри элемента определяется фигура, которая будет ограничивать изображения. Элемент Image предназначен для помещения в XAML – документ внешнего графического файла – в данном случае используется "sea2.jpg". В табл. 5.12 приводятся примеры использования элемента Clip.

Таблица 5.12. Элемент Clip
№ Код Вид в браузере
5.12.1
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291" 
Height="195"
Source="sea2.jpg"
 Stretch="Fill" >
   <Image.Clip>
      <EllipseGeometry 
      Center="150,100" 
RadiusX="90" 
RadiusY="90" />
    </Image.Clip>
  </Image>
</Canvas>

Описание

Отсекание части изображения окружностью. Изображение "sea2.jpg" было добавлено в папку проекта (рис. 5.6):

Содержимое проекта Silverlight-сайта

Рис. 5.6. Содержимое проекта Silverlight-сайта
№ Код Вид в браузере
5.12.2
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
<Image Width="291" 
Height="195" 
Source="sea2.jpg" 
Stretch="Fill" 
Clip="M20,10 L280,10 L20, 
190 L280,190 z" >
  </Image>
</Canvas>

Описание
Отсекание части изображения при помощи задания атрибута Clip
№ Код Вид в браузере
5.12.3
<Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
 <Image Width="291" 
Height="195" 
Source="sea2.jpg" 
Stretch="Fill" >
    <Image.Clip>
      <GeometryGroup>
      <EllipseGeometry 
      Center="100,100" 
RadiusX="90" 
RadiusY="90" />
        <EllipseGeometry 
        Center="200,100" 
RadiusX="90" 
RadiusY="90" />
       </GeometryGroup>
      </Image.Clip>

  </Image>
</Canvas>

Описание

Отсекание изображения с помощью двух пересекающихся окружностей. Заметна центральная область, которая не стала маской. Для того чтобы получить полностью заполненную область нужно проделать следующие шаги:

  1. Нарисовать две окружности:

    <Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" 
Height="195"
Background="White"
x:Name="Page">
 <Image Width="291" 
 Height="195" 
Source="sea2.jpg" 
Stretch="Fill" />
     
      <Ellipse Width="180" 
      Height="180" 
Canvas.Left = "5"  
Fill="White" 
Canvas.Top="10"/>
      <Ellipse Width="180" 
      Height="180" 
Canvas.Left = "105"  
Fill="White" 
Canvas.Top="10" />
   
</Canvas>

    В режиме дизайна изображение будет выглядеть так (рис. 5.7):

    Подготовка к клипированию области

    Рис. 5.7. Подготовка к клипированию области

  2. Объединить их с помощью пункта меню "Object \ Combine \ Unite" (рис. 5.8):

    Объединение фигур

    Рис. 5.8. Объединение фигур

    В результате получиться код, представляемый объектом Path:

    <Canvas
xmlns="http://schemas.microsoft.com
/client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
 <Image Width="291" 
 Height="195" 
Source="sea2.jpg" 
Stretch="Fill" />
  <Path Width="280" 
  Height="180" 
Fill="White" 
Stretch="Fill" 
Canvas.Left="5" 
Canvas.Top="10" 
Data="M89.999999,2.2737368E-13 
C108.50561,-1.1920927E-06
 125.70672,5.5852163 140,15.17627 
 C154.29328,5.5852163 
171.49439,-1.1920927E-06 190,2.2737368E-13 
C239.70563,-1.1920927E-06 280,40.
294371 280,89.999999 
C280,139.70563 239.70563,180 190,
180 C171.49439,180 
154.29328,174.41478 140,164.82373 
C125.70672,174.41478 
108.50561,180 89.999999,180 40.
294373,180 0,139.70563 
0,89.999999 0,40.294371 40.
294373,-1.1920927E-
06 89.999999,2.2737368E-
13 z"/>
   
</Canvas>

    Значение, содержащееся в атрибуте Data вырезаем и подставляем в атрибут Clip. Готовый код принимает следующий вид:

    <Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" Height="195"
Background="White"
x:Name="Page">
 <Image Width="291" 
 Height="195" 
Source="sea2.jpg" 
Stretch="Fill" 
Clip="M89.999999,2.2737368E-13 
C108.50561,-1.1920927E-06 
125.70672,5.5852163 140,15.17627 
C154.29328,5.5852163 
171.49439,-1.1920927E-06 190,2.
2737368E-13 C239.70563,-1.1920927E
-06 280,40.294371 280,89.999999 
C280,139.70563 239.70563,180 190,
180 C171.49439,180 
154.29328,174.41478 140,164.82373 
C125.70672,174.41478 
108.50561,180 89.999999,180 40.29
4373,180 0,139.70563 
0,89.999999 0,40.294371 40.294373,
-1.1920927E-06 89.999
999,2.2737368E-13 z" 
Canvas.Top="8" 
Canvas.Left="8" />
  </Canvas>

    Теперь фигура действительно полностью клипирует изображение (рис. 5.9):

    Готовый результат объединения фигур

    Рис. 5.9. Готовый результат объединения фигур
№ Код Вид в браузере
5.12.4
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" 
Height="195"
Background="White"
x:Name="Page">
<Rectangle  Width="291" 
Height="195"   
Canvas.Left="0" 
Canvas.Top="0" 
Fill="Black"/>
  <Image Width="291
  " Height="
195" Source="sea2.jpg" 
Stretch="Fill" 
Clip="M89.999999,2.2737368E-13
 C108.50561,-1.1920927E-06 
 125.70672,5.5852163 140,15.17627 
C154.29328,5.5852163 171.
49439,-1.1920927E-06 190,2.2737
368E-13 C239.70563,-1.1920927
E-06 280,40.294371 280,89.9
99999 C280,139.70563 239.705
63,180 190,180 C171.49439,180 
154.29328,174.41478 140,164.
82373 C125.70672,174.41478 
108.50561,180 89.999999,180 
40.294373,180 0,139.70563 
0,89.999999 0,40.294371 40.
294373,-1.1920927E-06 89.99
9999,2.2737368E-13 z" 
Canvas.Top="8" 
Canvas.Left="8" />
  </Canvas>

Описание
Для оформления можно использовать дополнительные элементы
№ Код Вид в браузере
5.12.5
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="291" 
Height="195"
Background="White"
x:Name="Page">
<Rectangle  Width="291" 
Height="195"  
Canvas.Left="0" 
Canvas.Top="0" 
Fill="Pink"/>
  <Image Width="291"
   Height="195" 
Source="sea2.jpg" 
Stretch="Fill" >
   <Image.Clip>
      <EllipseGeometry 
      Center="150,100" 
RadiusX="90" 
RadiusY="90" />
    </Image.Clip>
  </Image>
  <Ellipse Width = "180" 
  Height="180" 
Canvas.Left = "60" 
Canvas.Top="10" 
Stroke="Red" 
StrokeThickness="5" 
StrokeDashArray="1,1"  />
</Canvas>

Описание
Для последовательности элементов, среди которых имеется элемент Image, справедлив тот же самый вертикальный порядок
Дальше >>
< Лекция 4 || Лекция 5: 12345678 || Лекция 6 >

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

вопросов: 0