Información general sobre las máscaras de opacidad

Actualización: noviembre 2007

Las máscaras de opacidad permiten hacer que partes de un elemento o un objeto visual sean transparentes total o parcialmente. Para crear una máscara de opacidad, se aplica un Brush a la propiedad OpacityMask de un elemento o Visual. El pincel se asigna al elemento o al objeto visual y el valor de opacidad de cada píxel del pincel se utiliza para determinar la opacidad resultante de cada píxel correspondiente del elemento u objeto visual.

Este tema contiene las secciones siguientes.

• Requisitos previos

• Crear efectos visuales con máscaras de opacidad

• Crear una máscara de opacidad

• Utilizar un degradado como máscara de opacidad

• Especificar puntos de degradado para una máscara de opacidad

• Utilizar una imagen como máscara de opacidad

• Crear una máscara de opacidad a partir de un dibujo

• Temas relacionados

Requisitos previos

En esta información general se supone que está familiarizado con los objetos Brush. Para obtener una introducción al uso de pinceles, consulte Información general sobre el dibujo con colores sólidos y degradados. Para obtener información acerca de ImageBrush y DrawingBrush, consulte Pintar con imágenes, dibujos y elementos visuales.

Crear efectos visuales con máscaras de opacidad

Una máscara de opacidad funciona asignando su contenido al elemento u objeto visual. A continuación, se utiliza el canal alfa de cada uno de los píxeles del pincel para determinar la opacidad resultante de los píxeles correspondientes del elemento o el objeto visual; se omite el color real del pincel. Si una parte determinada del pincel es transparente, la parte correspondiente del elemento u objeto visual se vuelve transparente. Si una parte determinada del pincel es opaca, la opacidad de la parte correspondiente del elemento u objeto visual no cambia. La opacidad especificada por la máscara de opacidad se combina con cualquier valor de opacidad presente en el elemento u objeto visual. Por ejemplo, si un elemento es opaco en un 25% y se le aplica una máscara de opacidad que realiza la transición de totalmente opaco a totalmente transparente, el resultado es un elemento que efectúa una transición desde el 25% de opacidad a totalmente transparente.

Las máscaras de opacidad se utilizan para crear efectos visuales interesantes, como crear imágenes o botones que se desvanecen mediante un fundido, agregar texturas a los elementos, o combinar degradados para generar superficies cristalinas. En la ilustración siguiente se muestra el uso de una máscara de opacidad. Se utiliza un fondo de cuadros para mostrar las partes transparentes de la máscara.

Ejemplo de máscara de opacidad

Crear una máscara de opacidad

Para crear una máscara de opacidad, se crea un Brush y se aplica a la propiedad OpacityMask de un elemento u objeto visual. Puede utilizar cualquier tipo de Brush como máscara de opacidad.

• LinearGradientBrush, RadialGradientBrush: se utiliza para que un elemento o un objeto visual se desvanezcan mediante un fundido.

  En la ilustración siguiente se muestra LinearGradientBrush utilizado como máscara de opacidad.

  Ejemplo de máscara de opacidad con LinearGradientBrush

  

• ImageBrush: se utiliza para crear textura y efectos de bordes suaves o rasgados.

  En la ilustración siguiente se muestra ImageBrush utilizado como máscara de opacidad.

  Ejemplo de máscara de opacidad con LinearGradientBrush

  

• DrawingBrush: se utiliza para crear máscaras de opacidad complejas a partir de modelos de formas, imágenes y degradados.

  En la ilustración siguiente se muestra DrawingBrush utilizado como máscara de opacidad.

  Ejemplo de máscara de opacidad con DrawingBrush

  

Los pinceles de degradado (LinearGradientBrush y RadialGradientBrush) resultan particularmente apropiados para su uso como máscaras de opacidad. Dado que SolidColorBrush rellena una área de un color uniforme, no es muy eficaz como máscara de opacidad; utilizar SolidColorBrush equivale a establecer la propiedad OpacityMask del elemento u objeto visual.

Utilizar un degradado como máscara de opacidad

Para crear un relleno de degradado, se especifican dos o más puntos de degradado. Cada punto de degradado contiene un color y una posición (consulte Información general sobre el dibujo con colores sólidos y degradados para obtener más información sobre la creación y el uso de degradados). El proceso es el mismo cuando se utiliza un degradado como máscara de opacidad, con la excepción de que, en lugar de mezclar los colores, el degradado de la máscara de opacidad mezcla los valores de canal alfa. En consecuencia, el color real del contenido del degradado no es relevante; únicamente se tiene en cuenta el canal alfa, u opacidad, de cada color. A continuación, se muestra un ejemplo.

<!--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>

Especificar puntos de degradado para una máscara de opacidad

En el ejemplo anterior, el color Black definido por el sistema se utiliza como color de inicio del degradado. Dado que todos los colores de la clase Colors, excepto Transparent, son totalmente opacos, se pueden utilizar para definir de manera sencilla un color de inicio para una máscara de opacidad de degradado.

Para controlar más los valores alfa al definir una máscara de opacidad, puede especificar el canal alfa de los colores mediante la notación hexadecimal ARGB en el marcado o mediante el método Color.FromScRgb.

Especificar la opacidad del color en "XAML"

En Lenguaje de marcado de aplicaciones extensible (XAML), se utiliza la notación hexadecimal ARGB para especificar la opacidad de los colores individuales. La notación hexadecimal ARGB utiliza la sintaxis siguiente:

#aarrggbb

aa en la línea anterior representa un valor hexadecimal de dos dígitos utilizado para especificar la opacidad del color. rr, gg y bb representan valores hexadecimales de dos dígitos utilizados para especificar, respectivamente, la cantidad de rojo, verde y azul del color. Cada dígito hexadecimal puede tener un valor comprendido entre 0 y 9 o entre A y F. 0 es el valor mínimo y F es el máximo. Un valor de alfa de 00 especifica un color completamente transparente, mientras que un valor de alfa de FF crea un color totalmente opaco. En el ejemplo siguiente, se utiliza la notación hexadecimal ARGB para especificar dos colores. El primero es totalmente opaco, mientras el segundo es completamente transparente.

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

Utilizar una imagen como máscara de opacidad

Las imágenes también se pueden utilizar como máscaras de opacidad. En la ilustración siguiente se muestra un ejemplo. Se utiliza un fondo de cuadros para mostrar las partes transparentes de la máscara.

Ejemplo de máscara de opacidad

Para utilizar una imagen como una máscara de opacidad, utilice ImageBrush para contener la imagen. Al crear una imagen que se va a utilizar como máscara de opacidad, guarde la imagen en un formato que admita varios niveles de transparencia, como Gráficos de red portátiles (PNG). En el ejemplo siguiente se muestra el código utilizado para crear la ilustración anterior.

<!-- 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>

Utilizar una imagen en mosaico como máscara de opacidad

En el ejemplo siguiente, la misma imagen se utiliza con otro ImageBrush, pero se utilizan las características de mosaico del pincel para generar mosaicos de la imagen de 50 píxeles cuadrados.

<!-- 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>

Crear una máscara de opacidad a partir de un dibujo

Se pueden utilizar dibujos como máscaras de opacidad. Las formas contenidas dentro del dibujo se pueden rellenar con degradados, colores sólidos, imágenes o incluso otros dibujos. En la ilustración siguiente se muestra un ejemplo de un dibujo utilizado como máscara de opacidad. Se utiliza un fondo de cuadros para mostrar las partes transparentes de la máscara.

Ejemplo de máscara de opacidad con DrawingBrush

Para utilizar un dibujo como máscara de opacidad, utilice DrawingBrush para contener el dibujo. En el ejemplo siguiente se muestra el código utilizado para crear la ilustración anterior:

<!-- 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>

Utilizar un dibujo en mosaico como máscara de opacidad

Al igual que ImageBrush, se puede hacer que DrawingBrush cree el dibujo en mosaico. En el ejemplo siguiente, se utiliza un pincel de dibujo para crear una máscara de opacidad en mosaico.

<!-- 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>

Vea también

Conceptos

Pintar con imágenes, dibujos y elementos visuales

Información general sobre el dibujo con colores sólidos y degradados