7.1 2D图形绘制

概述

WPF提供了强大的2D图形绘制能力，通过System.Windows.Shapes命名空间和System.Windows.Media命名空间中的类，开发者可以轻松创建矢量图形、路径和复杂几何形状。本节将介绍WPF中2D图形绘制的核心概念和实现方法。

核心组件

1. 基本形状（Primitive Shapes）

WPF内置了以下基本形状控件：

  • Rectangle：矩形
  • Ellipse：椭圆/圆形
  • Line：直线
  • Polyline：多段线
  • Polygon：多边形
<Canvas>
    <Rectangle Width="100" Height="50" Fill="Blue" Stroke="Black" StrokeThickness="2"/>
    <Ellipse Width="80" Height="80" Fill="Red" Canvas.Left="120"/>
</Canvas>

2. 路径（Path）

Path控件用于绘制复杂几何图形，通过Data属性定义形状：

  • PathGeometry：由线段、弧线和贝塞尔曲线组成的几何图形
  • StreamGeometry：轻量级不可变几何图形（性能优化）
<Path Stroke="Black" StrokeThickness="1" 
      Data="M 10,100 C 10,300 300,-200 300,100"/>

3. 画笔（Brushes）

WPF提供多种画笔类型：

  • SolidColorBrush：纯色填充
  • LinearGradientBrush：线性渐变
  • RadialGradientBrush：径向渐变
  • ImageBrush：图像填充
  • VisualBrush：可视化元素填充
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Orange" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

高级特性

1. 几何图形组合（Geometry Combining）

通过CombinedGeometry实现布尔运算：

  • Union：并集
  • Intersect：交集
  • Xor：异或
  • Exclude：排除
var combined = new CombinedGeometry(
    GeometryCombineMode.Union,
    new EllipseGeometry(new Point(50,50), 40, 40),
    new RectangleGeometry(new Rect(30,30, 40, 40))
);

2. 绘图指令（DrawingContext）

在OnRender方法中使用低级绘图API：

protected override void OnRender(DrawingContext dc)
{
    dc.DrawRectangle(Brushes.Transparent, new Pen(Brushes.Red, 2), 
        new Rect(10, 10, 100, 50));
    dc.DrawEllipse(Brushes.Blue, null, new Point(150, 35), 30, 20);
}

性能优化建议

  1. 对静态图形使用DrawingVisual替代常规控件
  2. 复用Geometry和Brush资源
  3. 对复杂路径考虑使用StreamGeometry
  4. 启用硬件加速：
    <Window ...
    xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    PresentationOptions:Freeze="True">

实际应用示例

自定义进度条

<Grid>
    <Rectangle Name="track" Fill="#EEE" Height="20"/>
    <Rectangle Name="progress" Fill="#4CAF50" Height="20" 
               Width="{Binding ProgressValue, Converter={StaticResource PercentageConverter}}"/>
</Grid>

动态图表

var polyline = new Polyline
{
    Stroke = Brushes.SteelBlue,
    StrokeThickness = 2,
    Points = new PointCollection(dataPoints.Select(p => new Point(p.X, p.Y)))
};

注意：WPF的2D图形系统基于保留模式（Retained Mode），所有图形元素都参与布局系统并支持数据绑定，这与GDI/GDI+的即时模式（Immediate Mode）有本质区别。

Last Updated::