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

Рисование

Элемент 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, справедлив тот же самый вертикальный порядок
Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина