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

Рисование

Радиальная градиентная заливка

Радиальная градиентная заливка позволяет получать плавное изменение цвета в направлении от центра или к центру окружности. Синтаксис практически совпадает с определением линейного градиента, за исключением ключевого слова RadialGradientBrush:

<Ellipse Width="150" Height="150" >
            <Ellipse.Fill>
                <RadialGradientBrush>
              <GradientStop Color="Red" Offset="0" />
               <GradientStop Color="Yellow" Offset="1" />  
            </RadialGradientBrush>
            </Ellipse.Fill>
         </Ellipse>

Графически распределение цвета выглядит так (рис. 5.3):

 Определение RadialGradientBrush

Рис. 5.3. Определение RadialGradientBrush

Атрибут Offset в данном случае отсчитывается в направлении радиуса окружности. В табл. 5.6 приводятся примеры с различными значениями этого атрибута.

Таблица 5.6. Элемент RadialGradientBrush, атрибут Offset
Код Вид в браузере
5.6.1
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
        <Ellipse Width="150"
 Height="150" >
            <Ellipse.Fill>
                <RadialGradientBrush>
            <GradientStop Color="Red" 
Offset="0" />
             <GradientStop Color="
Yellow" Offset="1" />  
          </RadialGradientBrush>
            </Ellipse.Fill>
         </Ellipse>
</Canvas>

Описание
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1.
Код Вид в браузере
5.6.2
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
   <Ellipse Width="150" 
Height="150" >
     <Ellipse.Fill>
        <RadialGradientBrush>
  <GradientStop Color="Red" 
Offset="1" />
               <GradientStop Color="Yellow" 
Offset="0" />  
  </RadialGradientBrush>
            </Ellipse.Fill>
         </Ellipse>
</Canvas>

Описание
Атрибуты Offset с первыми предельными граничными значениями – 0 и 1. Цвета градиента поменяли местами
Код Вид в браузере
5.6.3
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
  x:Name="Page">
<Ellipse Width="150" 
Height="150" >
  <Ellipse.Fill>
     <RadialGradientBrush>
    <GradientStop Color="Red" 
Offset="0.2" />
    <GradientStop Color="Yellow" 
Offset="0.8" />  
    </RadialGradientBrush>
            </Ellipse.Fill>
         </Ellipse>
</Canvas>

Описание
Атрибуты Offset со значениями – 0.2 и 0.8. Как и в случае линейного градиента хорошо заметны области чистых цветов
Код Вид в браузере
5.6.4
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
    <Ellipse Width="150" 
Height="150" >
        <Ellipse.Fill>
           <RadialGradientBrush>
  <GradientStop Color="Red" 
Offset="0.3" />
              <GradientStop Color="Yellow" 
Offset="0.7" />  
        </RadialGradientBrush>
            </Ellipse.Fill>
         </Ellipse>
</Canvas>

Описание
Атрибуты Offset со значениями – 0.3 и 0.7
Код Вид в браузере
5.6.5
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
  <Ellipse Width="150" 
Height="150" >
    <Ellipse.Fill>
     <RadialGradientBrush>
  <GradientStop Color="Red" 
Offset="0.5" />
         <GradientStop Color="Yellow" 
Offset="0.5" />  
        </RadialGradientBrush>
        </Ellipse.Fill>
     </Ellipse>
</Canvas>

Описание
Атрибуты Offset со вторыми предельными граничными значениями – 0.5 и 0.5. В этом случае градиент вырождается в две радиальные области с чистыми цветами

Для элемента RadialGradientBrush можно задать область распространения непосредственно в его определении, при помощи атрибутов RadiusX, RadiusY и Center:

<Ellipse Width="150" Height="150" >
          <Ellipse.Fill>
            <RadialGradientBrush  RadiusX="0.5" 
RadiusY="0.5" Center="0.5,0.5" >
        <GradientStop Color="Red" 
Offset="0" />
        <GradientStop Color="Yellow" 
Offset="1" />  
      </RadialGradientBrush>
            </Ellipse.Fill>
         </Ellipse>

В этом случае область градиента будет локализована в центре фигуры в окружности с радиусом 25% (рис. 5.4)

Локализация радиального градиента

Рис. 5.4. Локализация радиального градиента

Применять набор этих свойств удобно в случае заливки произвольных, не сферических фигур – радиальная окружность будет присутствовать в области однородного цвета. В табл. 5.7 приводятся примеры использования этих атрибутов.

Таблица 5.7. Элемент RadialGradientBrush, атрибуты RadiusX, RadiusY и Center
Код Вид в браузере
5.7.1
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com
/winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
    <Ellipse Width="150" 
Height="150" >
      <Ellipse.Fill>
      <RadialGradientBrush  
      RadiusX="0.5" 
RadiusY="0.5" 
Center="0.5,0.5" >
    <GradientStop Color="
Red" Offset="0" />
           <GradientStop 
Color="Yellow" Offset="1" />  
          </RadialGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
</Canvas>

Описание
Значения атрибутов совпадают с принятыми по умолчанию
Код Вид в браузере
5.7.2
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
   <Ellipse Width="150" 
Height="150" >
     <Ellipse.Fill>
        <RadialGradientBrush  
        RadiusX="0.25" 
RadiusY="0.25" 
Center="0.5,0.5" >
  <GradientStop Color="Red" 
Offset="0" />
  <GradientStop Color="Yellow"
 Offset="1" />  
  </RadialGradientBrush>
        </Ellipse.Fill>
     </Ellipse>
</Canvas>

Описание
Градиент локализован в окружности с радиусом 25%.
Код Вид в браузере
5.7.3
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="300"
Background="White"
x:Name="Page">
     <Ellipse Width="150"
 Height="150" >
       <Ellipse.Fill>
           <RadialGradientBrush>
         <GradientStop Color="
Red" Offset="0" />
       <GradientStop 
Color="Yellow" 
Offset="1" />  
    </RadialGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
     
 <Ellipse Width="150" 
Height="150" 
Canvas.Top="150" 
Canvas.Left="0" >
      <Ellipse.Fill>
       <RadialGradientBrush  
       RadiusX="0.25" 
RadiusY="0.25" 
Center="0.5,0.5" >
       <GradientStop Color="Red" 
Offset="0" />
       <GradientStop Color="
Yellow" Offset="1" />  
        </RadialGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
</Canvas>

Описание
Заливка прямоугольника радиальным градиентом без атрибутов (наверху) и с атрибутами (внизу).
Код Вид в браузере
5.7.4
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
    <Ellipse Width="150" 
Height="150" >
       <Ellipse.Fill>
         <RadialGradientBrush  
         RadiusX="0.75"
 RadiusY="0.75" 
 Center="0.5,0.5" >
        <GradientStop Color=
        "Red" 
Offset="0" />
           <GradientStop Color="
Yellow" Offset="1" />  
        </RadialGradientBrush>
       </Ellipse.Fill>
      </Ellipse>
</Canvas>

Описание
Увеличение площади распространения градиента позволяет выделить его определенную часть
Код Вид в браузере
5.7.5
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
   <Ellipse Width="150" 
   Height="150" >
     <Ellipse.Fill>
         <RadialGradientBrush  RadiusX="0.25" 
         RadiusY="0.25" 
         Center="0.25,0.25" >
       <GradientStop Color="Red" 
       Offset="0" />
      <GradientStop Color="Yellow" 
      Offset="1" />  
        </RadialGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
</Canvas>

Описание
Отсекание фигурой изображение градиента, локализованного в верхней левой части
Код Вид в браузере
5.7.6
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="150" Height="150"
Background="White"
x:Name="Page">
    <Ellipse Width="150" 
    Height="150" >
      <Ellipse.Fill>
          <RadialGradientBrush  RadiusX="0.25" 
          RadiusY="0.25" 
          Center="0.75,0.75" >
        <GradientStop Color="Red" 
        Offset="0" />
        <GradientStop Color="Yellow" 
        Offset="1" />  
      </RadialGradientBrush>
       </Ellipse.Fill>
     </Ellipse>
</Canvas>

Описание
Отсекание фигурой изображение градиента, локализованного в правой нижней части
Илья Столупин
Илья Столупин
Россия
Олег Борхаленко
Олег Борхаленко
Украина