Vue d'ensemble des masques d'opacité

Article
06/02/2023

Les masques d’opacité vous permettent de rendre les parties d’un élément ou d’un visuel totalement ou partiellement transparentes. Pour créer un masque d’opacité, vous appliquez une Brush à la OpacityMask propriété d’un élément ou Visual. Le pinceau est mappé à l’élément ou à l’objet visuel, et la valeur d’opacité de chaque pixel de pinceau est utilisée pour déterminer l’opacité obtenu pour chaque pixel correspondant de l’élément ou de l’objet visuel.

Prérequis

Cette vue d’ensemble suppose que vous êtes familiarisé avec Brush les objets. Pour une introduction à l’utilisation des pinceaux, consultez Vue d’ensemble de la peinture avec des couleurs unies ou des dégradés. Pour plus d’informations sur et DrawingBrushpour plus d’informationsImageBrush, consultez Peinture avec des images, des dessins et des visuels.

Création d’effets visuels avec les masques d’opacité

Un masque d’opacité consiste à mapper son contenu à l’élément ou à l’objet visuel. Le canal alpha de chacun des pixels du pinceau est ensuite utilisé pour déterminer l’opacité obtenue pour les pixels correspondants de l’élément ou de l’objet visuel ; la couleur réelle du pinceau est ignorée. Si une partie donnée du pinceau est transparente, la partie correspondante de l’élément ou de l’objet visuel devient transparente. Si une partie donnée du pinceau est opaque, la partie correspondante de l’élément ou de l’objet visuel reste inchangée. L’opacité spécifiée par le masque d’opacité est associée à tous les paramètres d’opacité présents dans l’élément ou l’objet visuel. Par exemple, si un élément est opaque à 25 % et si le masque d’opacité appliqué passe d’une opacité totale à une transparence totale, l’élément passera d’une opacité à 25 % à une transparence totale.

Remarque

Bien que les exemples de cette vue d’ensemble illustrent l’utilisation de masques d’opacité sur les éléments d’image, un masque d’opacité peut être appliqué à n’importe quel élément ou Visual, y compris les panneaux et les contrôles.

Les masques d’opacité sont utilisés pour créer des effets visuels intéressants, par exemple pour créer des images ou des boutons qui s’effacent de la vue, pour ajouter des textures à des éléments, ou pour combiner des dégradés pour produire des surfaces semblables à du verre. L’illustration suivante montre l’utilisation d’un masque d’opacité. Un arrière-plan à carreaux est utilisé pour afficher les parties transparentes du masque.

Object with a LinearGradientBrush opacity mask
Exemple de masque d’opacité

Création d’un masque d’opacité

Pour créer un masque d’opacité, vous créez un Brush masque et l’appliquez à la OpacityMask propriété d’un élément ou d’un visuel. Vous pouvez utiliser n’importe quel type de Brush masque d’opacité.

LinearGradientBrush, : RadialGradientBrushutilisé pour rendre un élément ou un visuel fondu à partir d’une vue.

L’image suivante montre un LinearGradientBrush masque d’opacité utilisé.

Exemple de masque d’opacité LinearGradientBrush
ImageBrush: utilisé pour créer des effets de texture et de bord doux ou déchirés.

L’image suivante montre un ImageBrush masque d’opacité utilisé.

Exemple de masque d’opacité LinearGradientBrush
DrawingBrush: permet de créer des masques d’opacité complexes à partir de modèles de formes, d’images et de dégradés.

L’image suivante montre un DrawingBrush masque d’opacité utilisé.

Exemple de masque d’opacité DrawingBrush

Les pinceaux dégradés (LinearGradientBrush et RadialGradientBrush) sont particulièrement adaptés à une utilisation comme masque d’opacité. Étant donné qu’une SolidColorBrush zone remplit une zone avec une couleur uniforme, elles rendent des masques d’opacité médiocres ; l’utilisation d’un SolidColorBrush paramètre équivaut à définir la propriété de l’élément ou du Opacity visuel.

Utilisation d’un dégradé comme masque d’opacité

Pour créer un remplissage en dégradé, vous devez spécifier au moins deux points de dégradé. Chaque point de dégradé décrit une couleur et une position (voir Vue d’ensemble de la peinture avec des couleurs unies ou des dégradés pour plus d’informations sur la création et l’utilisation des dégradés). Le processus est le même lorsque vous utilisez un dégradé comme masque d’opacité, sauf que, au lieu de fusionner des couleurs, le dégradé du masque d’opacité fusionne les valeurs du canal alpha. Par conséquent, la couleur réelle du contenu du dégradé n’a aucune importance ; seul compte le canal alpha, ou l’opacité, de chaque couleur. Voici un exemple.

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

Spécification des points de dégradé pour un masque d’opacité

Dans l’exemple précédent, la couleur Black définie par le système est utilisée comme couleur de départ du dégradé. Étant donné que toutes les couleurs de la Colors classe, sauf Transparent, sont entièrement opaques, elles peuvent être utilisées pour définir simplement une couleur de départ pour un masque d’opacité dégradé.

Pour un contrôle supplémentaire sur les valeurs alpha lors de la définition d’un masque d’opacité, vous pouvez spécifier le canal alpha des couleurs à l’aide de la notation hexadécimale ARGB dans le balisage ou à l’aide de la Color.FromScRgb méthode.

Spécification de l’opacité de couleur en « XAML »

Dans XAML (Extensible Application Markup Language), vous utilisez la notation hexadécimale ARGB pour spécifier l’opacité des couleurs individuelles. La notation hexadécimale ARGB utilise la syntaxe suivante :

#aarrggbb

aa dans la ligne précédente représente une valeur hexadécimale à deux chiffres utilisée pour spécifier l’opacité de la couleur. rr, gg et bb représentent une valeur hexadécimale à deux chiffres utilisée pour spécifier la quantité de rouge, de vert et de bleu dans la couleur. Chaque chiffre hexadécimal peut avoir une valeur comprise entre 0 et 9 ou A et F. 0 est la plus petite valeur et F est la plus grande. Une valeur alpha de 00 indique qu’une couleur est entièrement transparente, tandis qu’une valeur alpha de FF crée une couleur entièrement opaque. Dans l’exemple suivant, la notation ARVB hexadécimale est utilisée pour spécifier deux couleurs. La première est totalement opaque, tandis que la seconde est totalement transparente.

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

Utilisation d’une image comme masque d’opacité

Les images peuvent également être utilisées comme masque d’opacité. L’image suivante en montre un exemple. Un arrière-plan à carreaux est utilisé pour afficher les parties transparentes du masque.

An object with an ImageBrush opacity mask
Exemple de masque d’opacité

Pour utiliser une image comme masque d’opacité, utilisez un ImageBrush pour contenir l’image. Lors de la création d’une image à utiliser comme masque d’opacité, enregistrez l’image dans un format prenant en charge plusieurs niveaux de transparence, tels que Portable Network Graphics (PNG). L’exemple suivant montre le code utilisé pour créer l’illustration précédente.

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

Utilisation d’une image en mosaïque comme masque d’opacité

Dans l’exemple suivant, la même image est utilisée avec une autre ImageBrushimage, mais les caractéristiques de mosaïque du pinceau sont utilisées pour produire des vignettes de l’image 50 pixels carrés.

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

Création d’un masque d’opacité à partir d’un dessin

Les dessins peuvent être utilisés comme masque d’opacité. Les formes contenues dans le dessin peuvent être remplies avec des dégradés, des couleurs unies, des images ou même d’autres dessins. L’image suivante montre un exemple de dessin utilisé comme masque d’opacité. Un arrière-plan à carreaux est utilisé pour afficher les parties transparentes du masque.

An object with a DrawingBrush opacity mask
Exemple de masque d’opacité DrawingBrush

Pour utiliser un dessin comme masque d’opacité, utilisez un DrawingBrush pour contenir le dessin. L’exemple suivant montre le code utilisé pour créer l’illustration précédente :

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

Utilisation d’un dessin en mosaïque comme masque d’opacité

Comme le ImageBrush, il DrawingBrush peut être fait pour mosaïquer son dessin. Dans l’exemple suivant, un pinceau de dessin est utilisé pour créer un masque d’opacité en mosaïque.

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

Share via