WPF DrawingBrush绘画笔刷的详细使用教程

DrawingBrush 是 WPF 中一种强大的画刷，用于填充图形或控件背景时，可以使用一组更加复杂的绘图内容。与其他简单画刷（如 SolidColorBrush、LinearGradientBrush）不同，DrawingBrush 允许使用图形、图像、文字和其他元素组合形成复杂的绘制效果，非常适合用于自定义控件、图标或背景。

在本文中，我们将详细介绍 WPF 中 DrawingBrush 的使用，包括如何创建和应用它，如何在其中使用几何图形、图像和文本，并展示常见的应用场景和高级用法。

目录

1. DrawingBrush 概述
2. 基本使用方法
3. 使用几何图形填充
   • GeometryDrawing
4. 使用图像填充
   • ImageDrawing
5. 使用文字填充
   • GlyphRunDrawing
6. 组合多个绘图
7. TileMode 和 Viewbox
8. 性能优化
9. 综合示例

1. DrawingBrush 概述

DrawingBrush 是基于 Drawing 对象的画刷，允许你使用任意复杂的绘图内容来填充元素。DrawingBrush 使用的 Drawing 可以是：

• GeometryDrawing：基于几何图形的绘制。
• ImageDrawing：基于图像的绘制。
• GlyphRunDrawing：基于文本的绘制。
• VideoDrawing：基于视频的绘制。
• DrawingGroup：多个 Drawing 对象的组合。

通过使用 DrawingBrush，可以在 WPF 中创建复杂的背景效果、控件样式或图标。

2. 基本使用方法

DrawingBrush 的使用方式与其他画刷类似。你可以通过设置 Background、Fill、Stroke 等属性来应用 DrawingBrush。

示例 1：最简单的 DrawingBrush

<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="LightBlue">
                    <GeometryDrawing.Geometry>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

上面的示例中，Rectangle 的 Fill 属性使用了 DrawingBrush，该 DrawingBrush 绘制了一个蓝色的圆形。

3. 使用几何图形填充

GeometryDrawing 是最常见的 DrawingBrush 用法，它允许使用简单或复杂的几何图形进行绘制。

GeometryDrawing

GeometryDrawing 使用 Geometry 属性定义形状，并通过 Brush 和 Pen 属性定义填充和边框。

示例 2：几何图形绘制

<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="LightGreen" >
                   <GeometryDrawing.Pen>
       					<Pen  Brush="Black" />
   				   </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <RectangleGeometry Rect="10,10,180,80" />
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

关键属性

• Brush：定义几何图形的填充颜色。
• Pen：定义几何图形的边框。
• Geometry：指定几何形状，如 RectangleGeometry、EllipseGeometry、PathGeometry 等。

示例 3：复杂几何图形

<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="Orange">
                    <GeometryDrawing.Pen>
                         <Pen  Brush="Black" />
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <PathGeometry>
                            <PathFigure StartPoint="10,10">
                                <LineSegment Point="190,10" />
                                <ArcSegment Point="190,90" Size="50,50" RotationAngle="0" IsLargeArc="False" SweepDirection="Clockwise" />
                                <LineSegment Point="10,90" />
                                <LineSegment Point="10,10" />
                            </PathFigure>
                        </PathGeometry>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

该示例中，使用了 PathGeometry 创建一个带有弧线的矩形形状。

4. 使用图像填充

ImageDrawing 允许使用图片作为 DrawingBrush 的绘制内容，这对于创建背景图像非常有用。

ImageDrawing

ImageDrawing 使用 ImageSource 属性指定要绘制的图像，并通过 Rect 属性指定图像绘制的区域。

示例 4：使用图像绘制

<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <ImageDrawing Rect="0,0,200,200" ImageSource="image.png" />
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

在这个示例中，DrawingBrush 使用图像 image.png 作为填充。

5. 使用文字填充

GlyphRunDrawing 允许使用文本内容作为绘图元素。这对于自定义文本显示非常有用。

GlyphRunDrawing

GlyphRunDrawing 通过 GlyphRun 对象绘制字符。

示例 5：使用文本绘制

        <Rectangle Grid.Row="1" Width="200" Height="100">
            <Rectangle.Fill>
                <DrawingBrush>
                    <DrawingBrush.Drawing>
                        <GlyphRunDrawing ForegroundBrush="Black">
                            <GlyphRunDrawing.GlyphRun>
                                <GlyphRun  
                                   FontRenderingEmSize="13.333333333333334" GlyphIndices="43 72 79 79 82 3 58 82 85 79 71" 
                                  AdvanceWidths="9.62666666666667 7.41333333333333 2.96 2.96 7 3 12 7.41333333333333 4.44 2.96 7.41333333333333" 
                                  BaselineOrigin="0,50">
                                    <GlyphRun.GlyphTypeface>
                                        <GlyphTypeface FontUri="C:\WINDOWS\Fonts\PRISTINA.TTF"  />
                                    </GlyphRun.GlyphTypeface>
                                </GlyphRun>
                            </GlyphRunDrawing.GlyphRun>
                        </GlyphRunDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>

GlyphRunDrawing 绘制了从指定字体中选取的字符，GlyphIndices 定义了字符的索引号。

6. 组合多个绘图

通过 DrawingGroup，你可以将多个 Drawing 对象组合在一起。

示例 6：组合多个绘图

<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="LightBlue">
                        <GeometryDrawing.Geometry>
                            <EllipseGeometry Center="100,100" RadiusX="80" RadiusY="80" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                    <GeometryDrawing Brush="Yellow">
                        <GeometryDrawing.Geometry>
                            <EllipseGeometry Center="100,100" RadiusX="40" RadiusY="40" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Rectangle.Fill>
</Rectangle>

在此示例中，使用 DrawingGroup 创建了两个同心圆的组合。

7. TileMode 和 Viewbox

DrawingBrush 可以像其他画刷一样重复绘制，TileMode 和 Viewbox 控制绘图的重复方式和可视区域。

示例 7：使用 TileMode

        <Rectangle Width="400" Height="200">
            <Rectangle.Fill>
                <DrawingBrush TileMode="Tile" Viewport="0,0,100,100" ViewportUnits="Absolute">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="Orange" >
                            <GeometryDrawing.Pen>
                                <Pen  Brush="Black" />
                            </GeometryDrawing.Pen>
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>

在这个示例中，TileMode="Tile" 使 DrawingBrush 的内容重复填充矩形，并通过 Viewport 控制每个重复的区域大小。

8. 性能优化

使用 DrawingBrush 进行复杂绘图时，需要注意性能问题。可以通过以下方式进行优化：

• 使用 Freezable 模式冻结 DrawingBrush，减少不必要的资源消耗。
• 尽量减少复杂的 Geometry，尤其是在动态绘制时。

9. 综合示例

最后，我们来看一个综合示例，展示如何将几何图形、图像和文字组合在一起：

  <Rectangle Width="300" Height="300">
      <Rectangle.Fill>
          <DrawingBrush>
              <DrawingBrush.Drawing>
                  <DrawingGroup>
                      <!-- 背景矩形 -->
                      <GeometryDrawing Brush="LightGray">
                          <GeometryDrawing.Geometry>
                              <RectangleGeometry Rect="0,0,300,300" />
                          </GeometryDrawing.Geometry>
                      </GeometryDrawing>

                      <!-- 图像 -->
                      <ImageDrawing Rect="50,50,200,150" ImageSource="father-2770301_1920.jpg" />

                      <!-- 文本 -->
                      <GlyphRunDrawing ForegroundBrush="Black">
                          <GlyphRunDrawing.GlyphRun>
                              <GlyphRun 
                                FontRenderingEmSize="24"
                                  GlyphIndices="43 72 79 79 82 3 58 82 85 79 71" 
                            AdvanceWidths="9.62666666666667 7.41333333333333 2.96 2.96 7 3 12 7.41333333333333 4.44 2.96 7.41333333333333" 
                                BaselineOrigin="100,250" >
                                  <GlyphRun.GlyphTypeface>
                                      <GlyphTypeface FontUri="C:\WINDOWS\Fonts\PRISTINA.TTF"  />
                                  </GlyphRun.GlyphTypeface>
                              </GlyphRun>
                          </GlyphRunDrawing.GlyphRun>
                      </GlyphRunDrawing>

                      <!-- 几何图形（圆形） -->
                      <GeometryDrawing Brush="LightBlue" >
                          <GeometryDrawing.Pen>
                              <Pen  Brush="Black" />
                          </GeometryDrawing.Pen>
                          <GeometryDrawing.Geometry>
                              <EllipseGeometry Center="150,150" RadiusX="50" RadiusY="50" />
                          </GeometryDrawing.Geometry>
                      </GeometryDrawing>
                  </DrawingGroup>
              </DrawingBrush.Drawing>
          </DrawingBrush>
      </Rectangle.Fill>
  </Rectangle>

示例解析：

1. 背景矩形：使用 GeometryDrawing 创建了一个 LightGray 灰色背景。
2. 图像：在指定区域内绘制了一个图像 image.png，位置在 50,50，大小为 200x150。
3. 文本：使用 GlyphRunDrawing 在指定位置绘制了文字，位置在矩形的下方。
4. 几何图形：使用了一个 EllipseGeometry 在中心绘制了一个蓝色的圆形，并加上黑色的边框。

总结

DrawingBrush 是 WPF 中一个非常强大和灵活的工具，允许你创建复杂的自定义绘制内容。通过它，你可以使用几何图形、图像、文字甚至视频等元素进行绘制，并支持动画和交互操作。它非常适合在控件、背景、图标等需要丰富视觉效果的场景中使用。

通过本文中的详细教程和示例，你应该能够灵活运用 DrawingBrush 来实现各种复杂的视觉效果，并通过 TileMode、Viewbox 和动画特性进一步增强画刷的表现力。