~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2017、绘图
作者：邓崇富
撰写时间：2019 年 5 月 26 日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
WPF的基本图形包括一下几个（它们都是Shape类的派生类）：
Line：直线段，可以设置其笔触（Stroke）。Rectangle：矩形，既有笔触，又有填充（Fill）。Ellipse：椭圆，长、宽相等的椭圆即为正圆，既有笔触又有填充。Polygon:多边形，由多条直线段围成的闭合区域，既有笔触又有填充。Polyline：折线（不闭合），由多条首尾相接的直线段组成。Path:路径（闭合区域），基本图形中的功能最强大的一个，可由若干直线、圆弧、贝塞尔曲线组成。 直线：直线是最简单的图形。使用X1、Y1两个属性可以设置直线的起点坐标，X2、Y2两个属性则可以设置直线的终点坐标。控制起点坐标的X1（Y1）与终点坐标的X2(Y2)相同就能实现一条平行线（垂直线）、交错的效果。Stroke（笔触）属性的数据类型是Brush（画刷），凡是Brush的派生类均可以用于给这个属性赋值。因为WPF提供了多种渐变色画刷，所以画直线也可以画出渐变色效果。同时，Line的一些属性还帮助我们画出虚线以及控制线段终点的形状。
下面的例子中综合了这些属性：
<Grid>
<Line X1="100" Y1="20" X2="660" Y2="20" Stroke="Red" StrokeThickness="10"/>
<Line X1="100" Y1="60" X2="660" Y2="60" Stroke="Orange" StrokeThickness="6"/>
<Line X1="100" Y1="100" X2="660" Y2="100" Stroke="Green" StrokeThickness="3"/>
<Line X1="100" Y1="140" X2="660" Y2="140" Stroke="Purple" StrokeThickness="2"/>
<Line X1="100" Y1="200" X2="660" Y2="200" Stroke="Black" StrokeEndLineCap="Flat" StrokeThickness="6"/>
<Line X1="100" Y1="240" X2="660" Y2="240" Stroke="Black" StrokeDashArray="3" StrokeThickness="1"/>
<Line X1="100" Y1="280" X2="660" Y2="280" Stroke="Black" StrokeDashArray="5" StrokeThickness="1"/>
<Line X1="290" Y1="5" X2="290" Y2="400" Stroke="Black" StrokeEndLineCap="Triangle" StrokeThickness="8"/>
<Line X1="100" Y1="380" X2="660" Y2="380" StrokeDashCap="Round" StrokeThickness="10">
<Line.Stroke>
<LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
<GradientStop Color="Blue"/>
<GradientStop Offset="1"/>
</LinearGradientBrush>
</Line.Stroke>
</Line>
</Grid>
运行效果如下图：
2.矩形：
矩形由笔触（Stroke，即边线）和填充（Fill）构成。Stroke属性的设置与Line一样，Fill属性的数据类型是Brush.Brush是个抽象类，所以我们不可能拿一个Brush类的实例为Fill属性赋值而只能用Brush派生类的实例进行赋值。WPF和绘图系统包非常丰富的Brush类型，常用地有：
SolidColorBrush:实心画刷。在XAML中可以使用颜色名称字符串（如Red、Blue）直接赋值。LinearGradientBrush:线性渐变画刷。色彩沿着设置地直线方向、按设置地变化点进行渐变。RadilalGradientBrush:径向渐变画刷。色彩沿半径地方向、按设定地变化点进行渐变，形成圆形填充。ImageBrush:使用图片（Image）作为填充内容。DrawingBrush:使用矢量图（Vector）和位图（Bitmap）作为填充内容。下面是使用各种画刷填充矩形的例子：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="211*"/>
<RowDefinition Height="208*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="389*"/>
<ColumnDefinition Width="403*"/>
</Grid.ColumnDefinitions>
<!--渐性渐变-->
<Rectangle Grid.Row="0" Grid.Column="0">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FFB6F8F1" Offset="0"/>
<GradientStop Color="#FF0082BD" Offset="0.25"/>
<GradientStop Color="#FF95DEFF" Offset="0.6"/>
<GradientStop Color="#FF004F72" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--经向渐变-->
<Rectangle Grid.Row="0" Grid.Column="1">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFB6F8F1" Offset="0"/>
<GradientStop Color="#FF0082BD" Offset="0.25"/>
<GradientStop Color="#FF95DEFF" Offset="0.75"/>
<GradientStop Color="#FF004F72" Offset="1.5"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--矢量图填充-->
<Rectangle Grid.Row="1" Grid.Column="0">
<Rectangle.Fill>
<DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="LightBlue">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="10" RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
<!--无填充，用渐性变填充边线-->
<Rectangle Grid.Row="1" Grid.Column="1">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Red" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
</Grid>
运行效果：
路径：路径（Path）可以说是WPF绘图中最强大的工具，一来是因为它完全可以替代其它几种图形，二来它可以将直线、圆弧、贝塞尔曲线等基本元素结合进来，形成更复杂的图形。路径最重要的一个属性是Data,Data的数据类型是Geometry（几何图形），我们正是使用这个属性将一些基本的线段连接起来、形成复杂的图形。
为Data属性赋值的语法有两种：一种是标签式的标准语法，另一种是专门用于绘制几何图形的“路径标记语法”。
Geometry的子类包括：
LineGeometry:直线几何图形。RectangleGeometry:矩形几何图形。EllipseGeometry:椭圆几何图形。PathGeometry:路径几何图形。StreamGeometry:PathGeometry的轻量级替代品，不支持Binding、动画等功能。CombinedGeometry: 有多个基本几何图形联合在一起，形成地单一几何图形。GeometryGroup:由多个基本几何图性组合在一起，形成地21几何图形组。下面是椭圆和路径绘图的例子代码：
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<!--椭圆路径-->
<Path Stroke="Green" Fill="LawnGreen" Grid.Column="0" Margin="-5,10,5,-10">
<Path.Data>
<EllipseGeometry Center="200,200" RadiusX="180" RadiusY="100"/>
</Path.Data>
</Path>
<!--自定义路径-->
<Path Stroke="Yellow" Fill="Orange" Grid.Column="1" Margin="10,10,-10,-10">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="25,140" IsClosed="True">
<PathFigure.Segments>
<LineSegment Point="20,40"/>
<LineSegment Point="40,110"/>
<LineSegment Point="50,20"/>
<LineSegment Point="80,110"/>
<LineSegment Point="110,20"/>
<LineSegment Point="120,110"/>
<LineSegment Point="140,40"/>
<LineSegment Point="135,140"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
运行效果图如下：
