Общие сведения о масках непрозрачности

Статья
08/11/2011

Маски непрозрачности позволяют делать части элемента либо видимыми, либо прозрачными, либо частично прозрачными. Для создания маски непрозрачности, примените Brush к свойству OpacityMask элемента или Visual. Кисть сопоставляется с элементом или визуальным компонентом, и значение коэффициента непрозрачности каждой точки кисти используется, чтобы определить получающуюся в итоге непрозрачность каждой соответствующей точки элемента или visual.

В этом разделе содержатся следующие подразделы.

Предварительные требования
Создание визуальных эффектов с помощью масок непрозрачности
Создание маски непрозрачности
Использование градиента в качестве маски непрозрачности
Задание позиции градиента для маски непрозрачности
Использование изображения в качестве маски непрозрачности
Создание маски непрозрачности из чертежа
Связанные разделы

Предварительные требования

Этот обзор предполагает, что вы знакомы с объектами Brush. Введение по использованию кистей содержится в разделе Общие сведения о закраске сплошным цветом и градиентом. Дополнительные сведения о ImageBrush и DrawingBrush см. в разделе Рисование с помощью объектов Image, Drawing и Visual.

Создание визуальных эффектов с помощью масок непрозрачности

Маска непрозрачности работает путем сопоставления ее содержимого с элементом или визуальным элементом. Альфа-канал каждой из точек кисти затем используется для определения полученной непрозрачности соответствующих точек элемента или visual; фактический цвет кисти игнорируется. Если данная часть кисти является прозрачной, соответствующая часть элемента или визуального элемента становится прозрачной. Если данная часть кисти является непрозрачной, непрозрачность соответствующей части элемента или визуального элемента не меняется. Непрозрачность, заданная маской непрозрачности, объединяется с любыми параметрами непрозрачности представленными в элементе или визуальном элементе. Например, если элемент имеет коэффициент непрозрачности 25 процентов и маска непрозрачности применяется к переходу из полной непрозрачности к полной прозрачности, результатом является элемент, который переходит от коэффициента непрозрачности 25 процентов к полной прозрачности.

Примечание
Хотя примеры в этом обзоре демонстрируют использование масок непрозрачности на элементах изображения, маска непрозрачности может применяться к любому элементу или Visual, включая панели и элементы управления.

Непрозрачность маски используются для создания интересных визуальных эффектов, таких как создание изображений или кнопок, которые исчезают, для добавления текстур элементам или для объединения градиентов, чтобы создавать стеклоподобные поверхности. На следующем рисунке демонстрируется использование маски непрозрачности. Клетчатый фон используется для отображения прозрачных частей маски.

Пример использования маски непрозрачности

Объект с маской непрозрачности LinearGradientBrush

Создание маски непрозрачности

Чтобы создать маску непрозрачности, создайте Brush и примените его к свойству OpacityMask элемента или визуального элемента. Можно использовать любой тип Brush в качестве маски непрозрачности.

LinearGradientBrush, RadialGradientBrush: используется для того, чтобы сделать элемент или визуальный элемент исчезающим.

На следующем рисунке показан LinearGradientBrush, использующийся в качестве маски непрозрачности.

Пример использования маски непрозрачности LinearGradientBrush
ImageBrush: используется для создания текстуры и эффектов гладких или оборванных краев.

На следующем рисунке показан ImageBrush, использующийся в качестве маски непрозрачности.

Пример использования маски непрозрачности LinearGradientBrush
DrawingBrush: Используется для создания сложных масок непрозрачности из шаблонов фигур, рисунков и градиентов.

На следующем рисунке показан DrawingBrush, использующийся в качестве маски непрозрачности.

Пример маски непрозрачности DrawingBrush

Градиентные кисти (LinearGradientBrush и RadialGradientBrush) хорошо подходят для использования в качестве маски непрозрачности. Поскольку SolidColorBrush заполняет область одинаковым цветом, он делает плохие маски непрозрачности; использование SolidColorBrush эквивалентно установке свойства элемента или визуального элемента OpacityMask.

Использование градиента в качестве маски непрозрачности

Для создания градиентной заливки вам необходимо указать две или более позиции градиента. Каждая позиция градиента содержит описание цвета и позиции (см.: Общие сведения о закраске сплошным цветом и градиентом для получения дополнительных сведений о создании и использовании градиентов). Процесс такой же, как при использовании градиента в качестве маски непрозрачности, за исключением того, что вместо смешения цветов, градиент маски непрозрачности смешивает значения альфа-канала. Таким образом, фактический цвет содержимого градиента не имеет значения; только альфа-канал или непрозрачность каждого цвета. Пример.

<!--With the opacity mask:--> 
<Image
  Width="200" Height="150"
  Source="sampleImages\Waterlilies.jpg"
  Margin="10"
  HorizontalAlignment="Left"
  Grid.Column="2" Grid.Row="3">
  <Image.OpacityMask>
    <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
      <LinearGradientBrush.GradientStops>
        <GradientStop Offset="0" Color="Black"/>
        <GradientStop Offset="1" Color="Transparent"/>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Image.OpacityMask>
</Image>

Задание позиции градиента для маски непрозрачности

В предыдущем примере определенный системой цвет Black используется в качестве начального цвета градиента. Поскольку все цвета в классе Colors, кроме Transparent, являются полностью непрозрачными, они могут использоваться чтобы просто определить начальный цвет для маски непрозрачности градиента.

Для дополнительного элемента управления сверх альфа-значений при определении маски непрозрачности можно указать альфа-канал цветов с помощью шестнадцатеричного формата ARGB в разметке или с помощью метода Color.FromScRgb.

Указание непрозрачности цвета в «XAML»

В Extensible Application Markup Language (XAML) используется шестнадцатеричный формат ARGB для указания прозрачности отдельных цветов. Шестнадцатеричный формат ARGB использует следующий синтаксис.

#aarrggbb

aa в предыдущей строке представляет двузначное шестнадцатеричное значение, используемое для указания непрозрачности цвета. rr, gg, и bb представляют собой двузначные шестнадцатеричные значения, используемые для указания красной, зеленой и синей компоненты цвета. Каждая шестнадцатеричная цифра может иметь значение от 0 до 9 либо от A до F. 0 соответствует наименьшему значению, а F — наибольшему. Альфа-значение 00 указывает на то, что цвет является полностью прозрачным, в то время как альфа-значение FF создает цвет, который является полностью непрозрачным. В следующем примере шестнадцатеричная форма записи ARGB используется для задания двух цветов. Первый — полностью непрозрачный, в то время как второй — полностью прозрачный.

<Canvas.OpacityMask>
  <RadialGradientBrush>
    <RadialGradientBrush.GradientStops>
      <GradientStop Offset="0" Color="#FF000000"/>
      <GradientStop Offset="1" Color="#00000000"/>
  </RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Canvas.OpacityMask>

Использование изображения в качестве маски непрозрачности

Изображения также могут использоваться в качестве масок непрозрачности. Следующее изображение показано в качестве примера. Клетчатый фон используется для отображения прозрачных частей маски.

Пример использования маски непрозрачности

Объект с маской непрозрачности ImageBrush

Для использования изображения в качестве маски непрозрачности используйте ImageBrush для включения изображения. При создании изображения, которое будет использоваться в качестве маски непрозрачности, сохраните рисунок в формате, поддерживающем несколько уровней прозрачности, например в Portable Network Graphics (PNG). В следующем примере показан код, используемый для создания предыдущего рисунка.

<!-- With the Opacity Mask-->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="1">
  <Image.OpacityMask>
    <ImageBrush ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Использование мозаичного изображения в качестве маски непрозрачности

В следующем примере это же изображение используется с другим ImageBrush, но возможности заполнения кисти используются для создания мозаичных элементов изображения с 50 точками в квадрате.

<!-- With the Opacity Mask -->
<Image
  Height="150"
  Width="200"
  Source="sampleImages/Waterlilies.jpg"
  HorizontalAlignment="Left"
  Margin="10"
  Grid.Column="2" Grid.Row="2">

  <Image.OpacityMask>
    <ImageBrush
      Viewport="0,0,50,50"
      ViewportUnits="Absolute"
      TileMode="Tile" 
      ImageSource="sampleImages/tornedges.png"/>
  </Image.OpacityMask>
</Image>

Создание маски непрозрачности из чертежа

Рисунки могут быть использованы как маски непрозрачности. Фигуры, содержащиеся в рисунке, могут заполняться с градиентом, чистыми цветами, изображениями, или даже другими рисунками. На следующем рисунке показан пример рисунка, используемого в качестве маски непрозрачности. Клетчатый фон используется для отображения прозрачных частей маски.

Пример маски непрозрачности DrawingBrush

Объект с маской непрозрачности DrawingBrush

Для использования рисунка в качестве маски непрозрачности используйте DrawingBrush для хранения рисунка. В следующем примере показан код, используемый для создания предыдущего рисунка:

<!-- With the Opacity Mask-->
<Image 
      Grid.Row="4" Grid.Column="5"
      Height="150"
      Width="200"
      Source="sampleImages/Waterlilies.jpg">
  <Image.OpacityMask>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Image.OpacityMask>
</Image>

Использование мозаичного рисунка в качестве маски непрозрачности

Как и ImageBrush, DrawingBrush могут быть сделаны для мозаичного отображения его рисунка. В следующем примере кисть рисования используется для создания мозаичной маски непрозрачности.

<!-- With the Opacity Mask-->
<Button
   Grid.Row="8" Grid.Column="5"
  Height="100"
  Width="200"
  FontFamily="MS Gothic"
  FontSize="16">
  A Button
  <Button.OpacityMask>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <GeometryDrawing>
          <GeometryDrawing.Brush>
            <RadialGradientBrush>
              <RadialGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="Black" />
                <GradientStop Offset="1" Color="Transparent" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </GeometryDrawing.Brush>
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0.05,0.05 0.9,0.9" />
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="0.1" Brush="Black" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.OpacityMask>
</Button>

См. также

Основные понятия

Рисование с помощью объектов Image, Drawing и Visual

Общие сведения о закраске сплошным цветом и градиентом

Поделиться через