如何:创建复合绘图

本示例演示如何使用 DrawingGroup,通过将多个 Drawing 对象组合为一个复合图形来创建复杂图形。

示例

下面的示例使用 DrawingGroup,基于 GeometryDrawingImageDrawing 对象创建一个复合图形。 下图显示了此示例生成的输出。

使用 DrawingGroup 创建的复合图形

具有多个绘图的 DrawingGroup

请注意显示图形边界的灰色边框。

            //
            // Create three drawings.
            //
            GeometryDrawing ellipseDrawing =
                new GeometryDrawing(
                    new SolidColorBrush(Color.FromArgb(102, 181, 243, 20)),
                    new Pen(Brushes.Black, 4),
                    new EllipseGeometry(new Point(50,50), 50, 50)
                );

            ImageDrawing kiwiPictureDrawing = 
                new ImageDrawing(
                    new BitmapImage(new Uri(@"sampleImages\kiwi.png", UriKind.Relative)), 
                    new Rect(50,50,100,100));

            GeometryDrawing ellipseDrawing2 =
                new GeometryDrawing(
                    new SolidColorBrush(Color.FromArgb(102,181,243,20)),
                    new Pen(Brushes.Black, 4),
                    new EllipseGeometry(new Point(150, 150), 50, 50)
                );

            // Create a DrawingGroup to contain the drawings.
            DrawingGroup aDrawingGroup = new DrawingGroup();
            aDrawingGroup.Children.Add(ellipseDrawing);
            aDrawingGroup.Children.Add(kiwiPictureDrawing);
            aDrawingGroup.Children.Add(ellipseDrawing2);

<DrawingGroup>

  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="50,50" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
  <ImageDrawing ImageSource="sampleImages\kiwi.png" Rect="50,50,100,100"/>
  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="150,150" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
</DrawingGroup>

可以使用 DrawingGroup 向它所包含的图形应用 TransformOpacity 设置、OpacityMaskBitmapEffectClipGeometryGuidelineSet。 因为 DrawingGroup 也是一个 Drawing,所以它可以包含其他 DrawingGroup 对象。

下面的示例与前面的示例类似,但它使用其他 DrawingGroup 对象来向某些图形应用位图效果和不透明蒙板。 下图显示了此示例生成的输出。

具有多个 DrawingGroup 对象的复合图形

具有多个绘图的 DrawingGroup

请注意显示图形边界的灰色边框。


            // Create a DrawingGroup.
            DrawingGroup mainGroup = new DrawingGroup();

            //
            // Create a GeometryDrawing
            //
            GeometryDrawing ellipseDrawing =
                new GeometryDrawing(
                    new SolidColorBrush(Color.FromArgb(102, 181, 243, 20)),
                    new Pen(Brushes.Black, 4),
                    new EllipseGeometry(new Point(50, 50), 50, 50)
                );

            //
            // Use a DrawingGroup to apply a blur
            // bitmap effect to the drawing.
            //
            DrawingGroup blurGroup = new DrawingGroup();
            blurGroup.Children.Add(ellipseDrawing);
            BlurBitmapEffect blurEffect = new BlurBitmapEffect();
            blurEffect.Radius = 5;
            blurGroup.BitmapEffect = blurEffect;

            // Add the DrawingGroup to the main DrawingGroup.
            mainGroup.Children.Add(blurGroup);

            //
            // Create an ImageDrawing.
            // 
            ImageDrawing kiwiPictureDrawing =
                new ImageDrawing(
                    new BitmapImage(new Uri(@"sampleImages\kiwi.png", UriKind.Relative)),
                    new Rect(50, 50, 100, 100));

            //
            // Use a DrawingGroup to apply an opacity mask
            // and a bevel.
            //
            DrawingGroup maskedAndBeveledGroup = new DrawingGroup();
            maskedAndBeveledGroup.Children.Add(kiwiPictureDrawing);

            // Create an opacity mask.
            RadialGradientBrush rgBrush =new RadialGradientBrush();
            rgBrush.GradientStops.Add(new GradientStop(Color.FromArgb(0,0,0,0), 0.55));
            rgBrush.GradientStops.Add(new GradientStop(Color.FromArgb(255,0,0,0), 0.65));
            rgBrush.GradientStops.Add(new GradientStop(Color.FromArgb(0,0,0,0), 0.75));
            rgBrush.GradientStops.Add(new GradientStop(Color.FromArgb(255,0,0,0), 0.80));
            rgBrush.GradientStops.Add(new GradientStop(Color.FromArgb(0,0,0,0), 0.90));
            rgBrush.GradientStops.Add(new GradientStop(Color.FromArgb(255,0,0,0), 1.0));
            maskedAndBeveledGroup.OpacityMask = rgBrush;

            // Apply a bevel.
            maskedAndBeveledGroup.BitmapEffect = new BevelBitmapEffect();

            // Add the DrawingGroup to the main group.
            mainGroup.Children.Add(maskedAndBeveledGroup);

            //
            // Create another GeometryDrawing.
            //
            GeometryDrawing ellipseDrawing2 =
              new GeometryDrawing(
                  new SolidColorBrush(Color.FromArgb(102, 181, 243, 20)),
                  new Pen(Brushes.Black, 4),
                  new EllipseGeometry(new Point(150, 150), 50, 50)
              );

            // Add the DrawingGroup to the main group.
            mainGroup.Children.Add(ellipseDrawing2);

<DrawingGroup>

  <DrawingGroup>
    <GeometryDrawing Brush="#66B5F314">
      <GeometryDrawing.Geometry>
        <EllipseGeometry Center="50,50" RadiusX="50"  RadiusY="50"/>
      </GeometryDrawing.Geometry>
      <GeometryDrawing.Pen>
        <Pen Brush="Black" Thickness="4" />
      </GeometryDrawing.Pen>
    </GeometryDrawing>
    <DrawingGroup.BitmapEffect>
      <BlurBitmapEffect Radius="5" />
    </DrawingGroup.BitmapEffect>
  </DrawingGroup>

  <DrawingGroup>
    <ImageDrawing ImageSource="sampleImages\kiwi.png" Rect="50,50,100,100"/>
    <DrawingGroup.BitmapEffect>
      <BevelBitmapEffect  />
    </DrawingGroup.BitmapEffect>
    <DrawingGroup.OpacityMask>
      <RadialGradientBrush>
        <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>

  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="150,150" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>

</DrawingGroup>

有关 Drawing 对象的更多信息,请参见 Drawing 对象概述

请参见

参考

BitmapEffect

Transform

OpacityMask

Opacity

ClipGeometry

GuidelineSet

概念

Drawing 对象概述