WPF Drawing 对象概述

Drawing 对象描述一些可见内容，例如形状、位图、视频或一行文本。不同类型的 Drawing 描绘的是不同类型的内容。下面列出了不同类型的 Drawing 对象。

GeometryDrawing – 绘制形状。
ImageDrawing – 绘制图像。
GlyphRunDrawing – 绘制文本。
VideoDrawing – 播放音频或视频文件。
DrawingGroup – 绘制其他绘图。使用绘图组可以将其他绘图组合成一个复合绘图。

Drawing 是一个通用对象；您可以通过多种方式使用 Drawing 对象。

您可以使用 DrawingImage 和 Image 控件将其显示为图像。
您可以将其与 DrawingBrush 一起使用以绘制对象，例如 Page 的 Background。
您可以将其用于描述 DrawingVisual 的外观。
您可以将其用于枚举 Visual 的内容。

WPF 提供了其他类型的对象，这些对象能够绘制形状、位图、文本和媒体。例如，您也可以使用 Shape 对象绘制形状， MediaElement 控件提供了将视频添加到应用程序中的另一种方式。那么，什么时候应使用 Drawing 对象？当可以牺牲框架级别功能以获取性能优势或需要 Freezable 功能时。由于 Drawing 对象缺少对布局、输入和焦点的支持，因此它们具有性能优势，是描述背景、剪贴画以及使用 Visual 对象进行低级绘制的理想选择。

由于 Drawing 对象是一种类型为 Freezable 的对象，因此它们具有若干特殊功能，其中包括可声明为资源、可在多个对象之间共享、可设为只读以提高性能、可进行克隆以及可设为线程安全对象。有关 Freezable 对象提供的不同功能的更多信息，请参见 Freezable 对象概述。

绘制形状

您可以使用 GeometryDrawing 来绘制形状。几何绘图的 Geometry 属性描述要绘制的形状，其 Brush 属性描述形状内部的绘制方式，其 Pen 属性描述其轮廓的绘制方式。

下面的示例使用 GeometryDrawing 绘制形状。该形状由 GeometryGroup 和两个 EllipseGeometry 对象进行描述。形状内部使用 LinearGradientBrush 进行绘制，其轮廓则使用 Black Pen 进行绘制。

本示例创建以下 GeometryDrawing。

GeometryDrawing

//
// Create the Geometry to draw.
//
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(
new EllipseGeometry(new Point(50,50), 45, 20)
);
ellipses.Children.Add(
new EllipseGeometry(new Point(50, 50), 20, 45)
);
//
// Create a GeometryDrawing.
//
GeometryDrawing aGeometryDrawing = new GeometryDrawing();
aGeometryDrawing.Geometry = ellipses;
// Paint the drawing with a gradient.
aGeometryDrawing.Brush =
new LinearGradientBrush(
Colors.Blue,
Color.FromRgb(204,204,255),
new Point(0,0),
new Point(1,1));
// Outline the drawing with a solid color.
aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);


<GeometryDrawing>
  <GeometryDrawing.Geometry>

    <!-- Create a composite shape. -->
    <GeometryGroup>
      <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
      <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
    </GeometryGroup>
  </GeometryDrawing.Geometry>
  <GeometryDrawing.Brush>

    <!-- Paint the drawing with a gradient. -->
    <LinearGradientBrush>
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="1.0" Color="#CCCCFF" />
    </LinearGradientBrush>
  </GeometryDrawing.Brush>
  <GeometryDrawing.Pen>

    <!-- Outline the drawing with a solid color. -->
    <Pen Thickness="10" Brush="Black" />
  </GeometryDrawing.Pen>
</GeometryDrawing>

有关完整的示例，请参见如何：创建 GeometryDrawing。

使用其他 Geometry 类（例如 PathGeometry），您可以通过创建曲线和弧线来创建更复杂的形状。有关 Geometry 对象的更多信息，请参见 Geometry 概述。

有关不使用 Drawing 对象绘制形状的其他方法的更多信息，请参见 WPF 中的形状和基本绘图概述。

绘制图像

您可以使用 ImageDrawing 绘制图像。 ImageDrawing 对象的 ImageSource 属性描述要绘制的图像，其 Rect 属性定义绘制图像的区域。

下面的示例将在一个矩形的 (75,75) 处绘制一个大小为 100 x 100 像素的图像。下面的插图显示在示例中创建的 ImageDrawing。添加了一条灰色边框，以显示 ImageDrawing 的边界。

大小为 100 x 100 的 ImageDrawing

// Create a 100 by 100 image with an upper-left point of (75,75).
ImageDrawing bigKiwi = new ImageDrawing();
bigKiwi.Rect = new Rect(75, 75, 100, 100);
bigKiwi.ImageSource = new BitmapImage(
new Uri(@"sampleImages\kiwi.png", UriKind.Relative));


<!-- The Rect property specifies that the image only fill a 100 by 100
     rectangular area. -->
<ImageDrawing Rect="75,75,100,100" ImageSource="sampleImages\kiwi.png"/>

有关图像的更多信息，请参见图像处理概述。

播放媒体（仅限代码）

说明
虽然您可以在可扩展应用程序标记语言 (XAML) 中声明 VideoDrawing，但是只能使用代码加载并播放其媒体。若要在可扩展应用程序标记语言 (XAML) 中播放视频，请改用 MediaElement。

您可以使用 VideoDrawing 和 MediaPlayer 来播放音频或视频文件。加载并播放媒体的方法有两种。第一种方法是使用 MediaPlayer 和 VideoDrawing 自身，第二种方法是创建您自己的 MediaTimeline，并将其与 MediaPlayer 和 VideoDrawing 一起使用。

说明
如果媒体随应用程序一起分发，则不能像图像那样将媒体文件用作项目资源。在项目文件中，必须将媒体类型改设为 Content，并将 CopyToOutputDirectory 设置为 PreserveNewest 或 Always。

若要在不创建自己的 MediaTimeline 的情况下播放媒体，请执行下列步骤。

创建 MediaPlayer 对象。
1. MediaPlayer player = new MediaPlayer();
使用 Open 方法加载媒体文件。
1. player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
创建 VideoDrawing。
1. VideoDrawing aVideoDrawing = new VideoDrawing();
通过设置 VideoDrawing 的 Rect 属性指定要绘制媒体的大小和位置。
1. aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
使用您创建的 MediaPlayer 来设置 VideoDrawing 的 Player 属性。
1. aVideoDrawing.Player = player;
使用 MediaPlayer 的 Play 方法开始播放媒体。
1. // Play the video once.
2. player.Play();

下面的示例使用 VideoDrawing 和 MediaPlayer 播放视频文件一次。

//
// Create a VideoDrawing.
//
MediaPlayer player = new MediaPlayer();
player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
VideoDrawing aVideoDrawing = new VideoDrawing();
aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
aVideoDrawing.Player = player;
// Play the video once.
player.Play();

若要对媒体进行更多的计时控制，请将 MediaTimeline 与 MediaPlayer 和 VideoDrawing 对象一起使用。通过 MediaTimeline，您可以指定是否重复播放视频。若要将 MediaTimeline 与 VideoDrawing 一起使用，请执行下列步骤：

声明 MediaTimeline 并设置其计时行为。
1. // Create a MediaTimeline.
2. MediaTimeline mTimeline =
3. new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
5. // Set the timeline to repeat.
6. mTimeline.RepeatBehavior = RepeatBehavior.Forever;
从 MediaTimeline 创建 MediaClock。
1. // Create a clock from the MediaTimeline.
2. MediaClock mClock = mTimeline.CreateClock();
创建一个 MediaPlayer 并使用 MediaClock 设置其 Clock 属性。
1. MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
2. repeatingVideoDrawingPlayer.Clock = mClock;
创建一个 VideoDrawing，并将 MediaPlayer 分配给 VideoDrawing 的 Player 属性。
1. VideoDrawing repeatingVideoDrawing = new VideoDrawing();
2. repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
3. repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;

下面的示例同时使用 MediaTimeline 以及 MediaPlayer 和 VideoDrawing 来反复播放某视频。

//
// Create a VideoDrawing that repeats.
//
// Create a MediaTimeline.
MediaTimeline mTimeline =
new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
// Set the timeline to repeat.
mTimeline.RepeatBehavior = RepeatBehavior.Forever;
// Create a clock from the MediaTimeline.
MediaClock mClock = mTimeline.CreateClock();
MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
repeatingVideoDrawingPlayer.Clock = mClock;
VideoDrawing repeatingVideoDrawing = new VideoDrawing();
repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;

请注意，使用 MediaTimeline 时，使用从 MediaClock 的 Controller 属性返回的交互式 ClockController 控制媒体播放，而不是使用 MediaPlayer 的交互式方法。

绘制文本

您可以使用 GlyphRunDrawing 和 GlyphRun 来绘制文本。下面的示例使用 GlyphRunDrawing 来绘制文本“Hello World”。

GlyphRun theGlyphRun = new GlyphRun(
new GlyphTypeface(new Uri(@"C:\WINDOWS\Fonts\TIMES.TTF")),
0,
false,
13.333333333333334,
new ushort[]{43, 72, 79, 79, 82, 3, 58, 82, 85, 79, 71},
new Point(0, 12.29),
new double[]{
9.62666666666667, 7.41333333333333, 2.96,
2.96, 7.41333333333333, 3.70666666666667,
12.5866666666667, 7.41333333333333,
4.44, 2.96, 7.41333333333333},
null,
null,
null,
null,
null,
null
);
GlyphRunDrawing gDrawing = new GlyphRunDrawing(Brushes.Black, theGlyphRun);


<GlyphRunDrawing ForegroundBrush="Black">
  <GlyphRunDrawing.GlyphRun>
    <GlyphRun 
      CaretStops="{x:Null}" 
      ClusterMap="{x:Null}" 
      IsSideways="False" 
      GlyphOffsets="{x:Null}" 
      GlyphIndices="43 72 79 79 82 3 58 82 85 79 71" 
      BaselineOrigin="0,12.29"  
      FontRenderingEmSize="13.333333333333334" 
      DeviceFontName="{x:Null}" 
      AdvanceWidths="9.62666666666667 7.41333333333333 2.96 2.96 7.41333333333333 3.70666666666667 12.5866666666667 7.41333333333333 4.44 2.96 7.41333333333333" 
      BidiLevel="0">
      <GlyphRun.GlyphTypeface>
        <GlyphTypeface FontUri="C:\WINDOWS\Fonts\TIMES.TTF" />
      </GlyphRun.GlyphTypeface>
    </GlyphRun>
  </GlyphRunDrawing.GlyphRun>
</GlyphRunDrawing>

GlyphRun 是低级别的对象，拟用于固定格式的文档表示和打印方案。将文本绘制到屏幕上的一种比较简单的方法是使用 Label 或 TextBlock。有关 GlyphRun 的更多信息，请参见 GlyphRun 对象和 Glyphs 元素简介概述。

复合绘图

使用 DrawingGroup，可将多个绘图组合为一个复合绘图。使用 DrawingGroup，您可将形状、图像和文本组合到一个 Drawing 对象中。

下面的示例使用 DrawingGroup 将两个 GeometryDrawing 对象和一个 ImageDrawing 对象组合到一起。该示例产生下面的输出。

复合绘图

具有多个绘图的 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，您还可以对其内容应用不透明度蒙版、变换、位图效果及其他操作。 DrawingGroup 操作按下列顺序应用： OpacityMask、 Opacity、 BitmapEffect、 ClipGeometry、 GuidelineSet 和 Transform。

下图演示 DrawingGroup 操作的应用顺序。

DrawingGroup 操作的顺序

DrawingGroup 操作顺序

下表描述您可用于操作 DrawingGroup 对象内容的属性。

属性	说明	图示
OpacityMask	改变 DrawingGroup 内容选定部分的不透明度。有关示例，请参见 How to: Control the Opacity of a Drawing。
Opacity	统一更改 DrawingGroup 内容的不透明度。使用此属性将 Drawing 设置为透明或部分透明。有关示例，请参见 How to: Apply an Opacity Mask to a Drawing。
BitmapEffect	将 BitmapEffect 应用到 DrawingGroup 内容。有关示例，请参见 How to: Apply a BitmapEffect to a Drawing。
ClipGeometry	将 DrawingGroup 内容剪裁到您使用 Geometry 描述的区域内。有关示例，请参见 How to: Clip a Drawing。
GuidelineSet	根据指定的准则将与设备无关的像素与设备像素对齐。此属性有助于确保清晰地在 DPI 较低的显示器上呈现图形的细节。有关示例，请参见如何：向绘图应用 GuidelineSet。
Transform	变换 DrawingGroup 内容。有关示例，请参见 How to: Apply a Transform to a Drawing。

使用 Drawing 绘制对象

DrawingBrush 是一种使用 Drawing 对象绘制区域的画笔。您可以使用它来借助 Drawing 绘制任何图形对象。 DrawingBrush 的 Drawing 属性描述其 Drawing。若要使用 DrawingBrush 呈现 Drawing，请使用画笔的 Drawing 属性将其添加到画笔中，并使用画笔绘制图形对象，例如控件或面板。

下面的示例使用从 GeometryDrawing 创建的图案通过 DrawingBrush 来绘制 Rectangle 的 Fill。该示例产生下面的输出。

与 DrawingBrush 一起使用的 GeometryDrawing

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SDKSample
{
public class DrawingBrushExample : Page
{
public DrawingBrushExample()
{
//
// Create the Geometry to draw.
//
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(
new EllipseGeometry(new Point(50,50), 45, 20)
);
ellipses.Children.Add(
new EllipseGeometry(new Point(50, 50), 20, 45)
);
//
// Create a GeometryDrawing.
//
GeometryDrawing aGeometryDrawing = new GeometryDrawing();
aGeometryDrawing.Geometry = ellipses;
// Paint the drawing with a gradient.
aGeometryDrawing.Brush =
new LinearGradientBrush(
Colors.Blue,
Color.FromRgb(204,204,255),
new Point(0,0),
new Point(1,1));
// Outline the drawing with a solid color.
aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);
DrawingBrush patternBrush = new DrawingBrush(aGeometryDrawing);
patternBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
patternBrush.TileMode = TileMode.Tile;
patternBrush.Freeze();
//
// Create an object to paint.
//
Rectangle paintedRectangle = new Rectangle();
paintedRectangle.Width = 100;
paintedRectangle.Height = 100;
paintedRectangle.Fill = patternBrush;
//
// Place the image inside a border and
// add it to the page.
//
Border exampleBorder = new Border();
exampleBorder.Child = paintedRectangle;
exampleBorder.BorderBrush = Brushes.Gray;
exampleBorder.BorderThickness = new Thickness(1);
exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
exampleBorder.VerticalAlignment = VerticalAlignment.Top;
exampleBorder.Margin = new Thickness(10);
this.Margin = new Thickness(20);
this.Background = Brushes.White;
this.Content = exampleBorder;
}
}
}


<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Margin="20" Background="White">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <DrawingBrush PresentationOptions:Freeze="True"
                      Viewport="0,0,0.25,0.25" TileMode="Tile">
          <DrawingBrush.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </Rectangle.Fill>

    </Rectangle>
  </Border>


</Page>

DrawingBrush 类提供了用于拉伸和平铺其内容的各种选项。有关 DrawingBrush 的更多信息，请参见使用图像、绘图和 Visual 进行绘制概述。