Partager via


Comment : appliquer un masque d'opacité à un dessin

Mise à jour : novembre 2007

Cet exemple montre comment appliquer un masque d'opacité à un Drawing. La classe DrawingGroup est le seul type d'objet Drawing qui prend en charge les masques d'opacité.

Pour appliquer un masque d'opacité à un objet Drawing, ajoutez-le à un DrawingGroup et définissez la propriété OpacityMask de l'objet DrawingGroup.

L'illustration suivante montre trois affichages du DrawingGroup : le dessin sans masque d'opacité, le masque d'opacité seul et le DrawingGroup après l'application du masque d'opacité.

DrawingGroup avec un masque d'opacité

Exemple

L'exemple suivant utilise un RadialGradientBrush comme masque d'opacité pour un DrawingGroup.

Remarque :

Bien que cet exemple utilise un RadialGradientBrush comme masque d'opacité, les objets LinearGradientBrush, DrawingBrush, ImageBrush et VisualBrush peuvent également faire de bons masques d'opacité. Pour plus d'informations sur les masques d'opacité et leur fonctionnement, consultez Vue d'ensemble des masques d'opacité.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SDKSample
{
    /// <summary>
    /// Shows how to create and apply an OpacityMask to
    /// a DrawinGroup.
    /// </summary>
    public class OpacityMaskExample : Page
    {
        public OpacityMaskExample()
        {

            //
            // Create a GeometryDrawing.
            //

            // Define the drawing's contents.
            PathFigure pLineFigure = new PathFigure();
            pLineFigure.StartPoint = new Point(25, 25);
            PolyLineSegment pLineSegment = new PolyLineSegment();
            pLineSegment.Points.Add(new Point(0, 50));
            pLineSegment.Points.Add(new Point(25, 75));
            pLineSegment.Points.Add(new Point(50, 50));
            pLineSegment.Points.Add(new Point(25, 25));
            pLineSegment.Points.Add(new Point(25, 0));
            pLineFigure.Segments.Add(pLineSegment);
            PathGeometry pGeometry = new PathGeometry();
            pGeometry.Figures.Add(pLineFigure);

            GeometryDrawing drawing1 = new GeometryDrawing(
                    Brushes.Lime,
                    new Pen(Brushes.Black, 10),
                    pGeometry
                );

            //
            // Create another GeometryDrawing.
            //
            GeometryDrawing drawing2 = new GeometryDrawing(
                    Brushes.Lime,
                    new Pen(Brushes.Black, 2),
                    new EllipseGeometry(new Point(10, 10), 5, 5)
                );

            // Create the DrawingGroup and add the
            // geometry drawings.
            DrawingGroup aDrawingGroup = new DrawingGroup();
            aDrawingGroup.Children.Add(drawing1);
            aDrawingGroup.Children.Add(drawing2);

            //
            // Define an opacity mask and apply it to the
            // drawing group.
            //
            RadialGradientBrush opacityMask = new RadialGradientBrush();
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(255, 0, 0, 0), 0.0));
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(0, 0, 0, 0), 0.55));
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(255, 0, 0, 0), 0.65));
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(0, 0, 0, 0), 0.75));
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(255, 0, 0, 0), 0.80));
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(0, 0, 0, 0), 0.90));
            opacityMask.GradientStops.Add(new GradientStop(Color.FromArgb(255, 0, 0, 0), 1.0));

            aDrawingGroup.OpacityMask = opacityMask;


            // Use an Image control and a DrawingImage to
            // display the drawing.
            DrawingImage aDrawingImage = new DrawingImage(aDrawingGroup);

            // Freeze the DrawingImage for performance benefits.
            aDrawingImage.Freeze();

            Image anImage = new Image();
            anImage.Source = aDrawingImage;
            anImage.Stretch = Stretch.None;
            anImage.HorizontalAlignment = HorizontalAlignment.Left;

            // Create a border around the images and add it to the
            // page.
            Border imageBorder = new Border();
            imageBorder.BorderBrush = Brushes.Gray;
            imageBorder.BorderThickness = new Thickness(1);
            imageBorder.VerticalAlignment = VerticalAlignment.Top;
            imageBorder.HorizontalAlignment = HorizontalAlignment.Left;
            imageBorder.Margin = new Thickness(20);
            imageBorder.Child = anImage;

            this.Background = Brushes.White;
            this.Margin = new Thickness(20);
            this.Content = imageBorder;

        }
    }
}
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Margin="20" Background="White">
  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20">
    <Image Stretch="None" HorizontalAlignment="Left">
      <Image.Source>
        <DrawingImage PresentationOptions:Freeze="True">
          <DrawingImage.Drawing>

            <!-- A DrawingGroup with a RadialGradientBrush as its opacity mask. -->
            <DrawingGroup>
              <GeometryDrawing Brush="Lime" Geometry="M 25,25 L 0,50 25,75 50,50 25,25 25,0">
                <GeometryDrawing.Pen>
                  <Pen Thickness="10" Brush="Black" />
                </GeometryDrawing.Pen>
              </GeometryDrawing>
              <GeometryDrawing Brush="Lime">
                <GeometryDrawing.Geometry>
                  <EllipseGeometry Center="10,10" RadiusX="5" RadiusY="5" />
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>
                  <Pen Thickness="2" Brush="Black" />
                </GeometryDrawing.Pen>
              </GeometryDrawing>
              <DrawingGroup.OpacityMask>

                <!-- The opacity mask. -->
                <RadialGradientBrush>
                  <GradientStop Offset="0.0" Color="#FF000000" />
                  <GradientStop Offset="0.55" Color="#00000000" />
                  <GradientStop Offset="0.65" Color="#FF000000" />
                  <GradientStop Offset="0.75" Color="#00000000" />
                  <GradientStop Offset="0.80" Color="#FF000000" />
                  <GradientStop Offset="0.90" Color="#00000000" />
                  <GradientStop Offset="1.0" Color="#FF000000" />
                </RadialGradientBrush>
              </DrawingGroup.OpacityMask>
            </DrawingGroup>
          </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>
  </Border>


</Page>

Voir aussi

Concepts

Vue d'ensemble des objets Drawing

Vue d'ensemble des masques d'opacité

Référence

DrawingGroup.OpacityMask