Академия Microsoft:

Основы XAML
[+]
Опубликован: 23.01.2009 | Доступ: свободный | Студентов: 1542 / 152 | Оценка: 4.33 / 4.22 | Длительность: 13:08:00
Темы: Компьютерная графика, Программирование
Специальности: Программист
Лекция 5:

Рисование
A
|
версия для печати
< Лекция 4 || Лекция 5: 12345678 || Лекция 6 >
Аннотация: Во второй Лекции, при знакомстве с графическими элементами, мы использовали атрибуты Fill и Stroke для задания цветов заливки и контура фигуры. В этой лекции мы изучим более глубоко возможности оформления фигур, а также освоим новые элементы – клипы и маски
Ключевые слова: nonzero, градиентная заливка, прямой, атрибут, градиент, координаты, синтаксис, Окружность, радиальный градиент, transparent, XAML, miter, заполнение области, вертикальный порядок

Заливка

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

Таблица 5.1. Атрибуты заливки
№ Название
5.1.1
Fill
Описание
Заливка цветом внутренней части фигуры или текста
Диапазон значений
Именованные названия, шестнадцатеричный индекс цвета
Значение по умолчанию
Белый и прозрачный (#FFFFFFFF)
№ Название
5.1.2
Opacity
Описание
Прозрачность заливки фигуры может задаваться в численных значениях. Кроме этого, в XAML поддерживается шестнадцатеричная запись вида ARGB, где A – величина, определяющее канал прозрачности. Значение 00 соответствует полной прозрачности, FF – непрозрачности
Диапазон значений
Число между 0 (полная прозрачность) и 1 (полная непрозрачность )
Значение по умолчанию
0
№ Название
5.1.3
FillRule
Описание
Режим заливки фигуры, при которой остаются пустые (незакрашенные) области
Диапазон значений
NonZero | EvenOdd NonZero – полная заливка. EvenOdd – заливка с пустыми областями
Значение по умолчанию
EvenOdd

Ранее мы пользовались при заливке только атрибутом Fill . Следовательно, мы имели дело с полностью непрозрачными объектами, заполняемыми цветом полностью. В табл. 5.2 приводятся примеры использования атрибутов заливки.

Таблица 5.2. Атрибуты Fill, Opacity и FillRule
№ Код Вид в браузере
5.2.1
<Canvas
 xmlns="http://schemas.microsoft.com/
 client/2007"
 xmlns:x="http://schemas.microsoft.com/
 winfx/2006/xaml"
 Width="210" Height="100"
 Background="White"
 x:Name="Page">
 <Rectangle Canvas.Left="0" 
 Canvas.Top="25"
 Width="210" Height="50" 
 Fill="black" />
  
 <Rectangle Canvas.Left="10" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red"
 Opacity="0.1" />
 <Rectangle Canvas.Left="30" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" 
Opacity="0.2" />
 <Rectangle Canvas.Left="50" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" 
Opacity="0.3" />
 <Rectangle Canvas.Left="70" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" 
Opacity="0.4" />
 <Rectangle Canvas.Left="90" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" 
Opacity="0.5" />
 <Rectangle Canvas.Left="110" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" 
Opacity="0.6" />
 <Rectangle Canvas.Left="130" 
 Canvas.Top="0"
 Width="10" Height="100" 
 Fill="red" 
Opacity="0.7" />
 <Rectangle Canvas.Left="150" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red"
 Opacity="0.8" />
 <Rectangle Canvas.Left="170" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red"
 Opacity="0.9" />
 <Rectangle Canvas.Left="190" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" 
Opacity="1" />
</Canvas>

Описание
Полоски с различными значениями прозрачности
№ Код Вид в браузере
5.2.2
<Canvas
 xmlns="http://schemas.microsoft.com/
 client/2007"
 xmlns:x="http://schemas.microsoft.com/
 winfx/2006/xaml"
 Width="210" Height="100"
 Background="White"
 x:Name="Page">

 <Rectangle Canvas.Left="0" 
 Canvas.Top="25" 
Width="210" Height="50" 
Fill="black" />
 <Canvas Width="210" 
 Height="100" 
Canvas.Left="0" 
Canvas.Top="0" 
Opacity="0.6">
 <Rectangle Canvas.Left="10" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="30" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="50" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="70" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="90" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="110" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="130" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 <Rectangle Canvas.Left="150" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red"/>
 <Rectangle Canvas.Left="170" 
 Canvas.Top="0"
 Width="10" Height="100" 
 Fill="red" />
 <Rectangle Canvas.Left="190" 
 Canvas.Top="0" 
Width="10" Height="100" 
Fill="red" />
 </Canvas>
</Canvas>

Описание
Задание единой прозрачности для группы элементов при помощи элемента Canvas
№ Код Вид в браузере
5.2.3
<Canvas
 xmlns="http://schemas.microsoft.com/
 client/2007"
 xmlns:x="http://schemas.microsoft.com/
 winfx/2006/xaml"
 Width="210" Height="100"
 Background="White"
 x:Name="Page">

 <Rectangle Canvas.Left="0" 
 Canvas.Top="25"
 Width="210" Height="50" 
 Fill="black" />
    
    <Path Fill="red" 
    Opacity="0.6" >
  <Path.Data>
   <GeometryGroup FillRule="NonZero" >
                    
   <RectangleGeometry Rect="
   10,0 10 100" />
      <RectangleGeometry Rect="
      30,0 10 100" />
       <RectangleGeometry Rect="
       50,0 10 100" />
  <RectangleGeometry Rect="
  70,0 10 100" />
     <RectangleGeometry Rect="
     90,0 10 100" />
   <RectangleGeometry Rect="
   110,0 10 100" />
     <RectangleGeometry Rect="
     130,0 10 100" />
    <RectangleGeometry Rect="
    150,0 10 100" />
      <RectangleGeometry Rect="
      170,0 10 100" />
        <RectangleGeometry Rect="
        190,0 10 100" />
  </GeometryGroup>
  </Path.Data>
</Path>

</Canvas>

Описание
Задание единой прозрачности для группы элементов, объединенных в элементе Path
№ Код Вид в браузере
5.2.4
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210" 
Height="100"
Background="White"
x:Name="Page">

 <Polygon Points="50,6 
 18,86 98,38 2,38 82,86" 
FillRule="NonZero"
   Fill="red" Stroke="black" 
StrokeThickness="1"/>
     
       <Polygon Points="151,6 
       119,86 199,38 103,38 183,86" 
FillRule="EvenOdd"
    Fill="red" 
    Stroke="black" 
StrokeThickness="1"/>
</Canvas>

Описание
Режимы заливки – полная и с пустыми областями
№ Код Вид в браузере
5.2.5
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml"
Width="210" Height="100"
Background="White"
x:Name="Page">

    <Polygon Points="50,6 18,86
     98,38 2,38 82,86" 
  Fill="red" Stroke="black" 
StrokeThickness="1"/>
     
    <Polygon Points="151,6 119,
    86 199,38 103,38 183,86" 
FillRule="EvenOdd"
       Fill="red" 
       Stroke="black" 
StrokeThickness="1"/>
</Canvas>

Описание
Значение EvenOdd совпадает с принятым по умолчанию
№ Код Вид в браузере
5.2.6
<Canvas
xmlns="http://schemas.microsoft.com/
client/2007"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xam"
Width="350" Height="100"
Background="Black"
x:Name="Page">
  
<TextBlock
  Canvas.Top="10"
  Canvas.Left="15"
  FontFamily="Arial"
  FontSize="40"
  FontWeight="Bold" 
  >

  <Run Text="Red " 
Foreground="Red" />
    <Run Text="Green " 
Foreground="Green" />
    <Run Text="Blue " 
Foreground="Blue" />

</TextBlock>

<TextBlock
  Canvas.Top="50"
  Canvas.Left="15"
  FontFamily="Arial"
  FontSize="40"
  FontWeight="Bold" 
  Opacity="0.5">

  <Run Text="Red " 
Foreground="Red" />
    <Run Text="Green " 
Foreground="Green" />
    <Run Text="Blue " 
Foreground="Blue" />

</TextBlock>


</Canvas>

Описание
Полностью непрозрачный и частично прозрачный текст на черном фоне

Линейная градиентная заливка

Линейная градиентная заливка предназначена для получения плавного цветового перехода в направлении, заданной прямой. Элемент LinearGradientBrush формирует содержимое заливки заданной фигуры:

<Rectangle Width="150" Height="150" >
    <Rectangle.Fill>
        <LinearGradientBrush>
            <GradientStop Color="red" Offset="0" />
            <GradientStop Color="yellow" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Внутри элемента LinearGradientBrush задаются цвета градиента с помощью тегов GradientStop и граница области каждого из цветов в атрибутах Оffset (рис. 5.1):

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

Рис. 5.1. Определение LinearGradientBrush

Атрибут Offset определяет области покрытия исходных цветов и формируемого ими промежуточного. Так, на рисунке первый цвет занимает 0.3 от всей области, второй цвет также 0.3 (1- 0.7=0.3), а область градиента занимает всю остальную часть, т.е. 0.4. В табл. 5.3 приводится примеры с различными значениями атрибута Offset.

Дальше >>
< Лекция 4 || Лекция 5: 12345678 || Лекция 6 >

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

вопросов: 0