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

Рисование

Элемент OpacityMask

При работе с объектом Clip можно было заметить, что внутреннее оформление фигуры, определяемой внутри элемента, игнорируется. Элемент OpacityMask является инструментом, поддерживающим все свойства элемента Clip с учетом графической структуры заполнителя. Фрагмент кода для элемента OpacityMask выглядит так:

<Image Width="291" 
Height="195" Source="sea2.jpg" 
Stretch="Fill" >
   <Image.OpacityMask>
  
          <RadialGradientBrush >
          <GradientStop Color="Blue" 
          Offset="0" />
           <GradientStop Color="Transparent" 
           Offset="1" />  
          </RadialGradientBrush>
       
    </Image.OpacityMask>
  </Image>

Здесь в качестве заливки фигуры-заполнителя используется радиальный градиент. В табл. 5.13 приводятся примеры использования элемента mask.

Таблица 5.13. Элемент OpacityMask
Код Вид в браузере
5.13.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.OpacityMask>
  
     <RadialGradientBrush >
     <GradientStop Color="
Blue" Offset="0" />
       <GradientStop Color="
Transparent" Offset="1" />  
     </RadialGradientBrush>
       
    </Image.OpacityMask>
  </Image>        

</Canvas>

Описание
Применение в качестве заполнителя маски окружности с градиентной заливкой
Код Вид в браузере
5.13.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" >
   <Image.OpacityMask>
  
           <RadialGradientBrush >
          <GradientStop Color="
Blue" Offset="0.8" />
           <GradientStop Color="
Transparent" Offset="1" />  
          </RadialGradientBrush>
       
    </Image.OpacityMask>
  </Image>        

</Canvas>

Описание
Применение в качестве заполнителя маски окружности с градиентной заливкой. Уменьшением размера градиентной области достигается увеличение площади открытой поверхности
Код Вид в браузере
5.13.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.OpacityMask>
  
      <RadialGradientBrush >
        <GradientStop Color="Red" 
Offset="0.9" />
         <GradientStop Color="
Transparent" Offset="1" />  
      </RadialGradientBrush>
       
    </Image.OpacityMask>
  </Image>        

<Rectangle Width="291" 
Height="195" >
    <Rectangle.Fill>
    <RadialGradientBrush >
           <GradientStop Color="
Transparent" Offset="0.8" />
        <GradientStop Color="
Blue" Offset="1" />  
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

</Canvas>

Описание
При использовании заполнителя, заполненного градиентом любого цвета, на рисунке заметно уменьшение прозрачности белого цвета. Для получения нужного цвета используется комбинация обычного элемента OpacityMask и наложения радиального градиента с падением прозрачности
Код Вид в браузере
5.13.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">
<Image Width="291" 
Height="195" 
Source="sea2.jpg" 
Stretch="Fill" >
 <Image.OpacityMask>
          
 <ImageBrush ImageSource="fish.png"/> 
      
   </Image.OpacityMask>
</Image>        

</Canvas>

Описание

Применение в качестве заполнителя внешнего графического файла в формате PNG. Исходное изображение было подготовлено во внешнем графическом редакторе (рис. 5.10):

 Подготовка изображения в формате PNG

Рис. 5.10. Подготовка изображения в формате PNG

Далее оно также было добавлено в папку с проектом (рис. 5.11):

 Содержимое папки проекта

Рис. 5.11. Содержимое папки проекта
Код Вид в браузере
5.13.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">
<Image Width="291" 
Height="195" 
Source="sea2.jpg" 
Stretch="Fill" >
 <Image.OpacityMask>
          
 <ImageBrush
     Viewport="0,0,50,50"
     ViewportUnits="Absolute"
     TileMode="Tile" 
     ImageSource="fish.png"/>       
    </Image.OpacityMask>
  </Image>        

</Canvas>

Описание
Создание паттерна с помощью атрибута TileMode. См. раздел "TileBrush Class":http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.aspx и "TileBrush.Viewport Property": http://msdn.microsoft.com/en-us/library/system.windows.media.tilebrush.viewport.aspx
Код Вид в браузере
5.13.6
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="350" Height="200"
Background="White"
x:Name="Page">
  
<TextBlock
  Canvas.Top="5"
  Canvas.Left="25"
  FontFamily="Arial"
  FontSize="150"
  Foreground="Red"
>

 АБВ  
  <TextBlock.OpacityMask>  
     <LinearGradientBrush 
     StartPoint="0,0" 
EndPoint="0,1">
       <GradientStop 
       Color="Blue"
 Offset="0" />
       <GradientStop 
       Color="Transparent"
 Offset="1.2" />  
     </LinearGradientBrush>       
   </TextBlock.OpacityMask>

</TextBlock>

</Canvas>

Описание
Маскированный текст

Мы закончили рассмотрение основных возможностей рисования, связанных с простой графикой.

Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина