WPF绘图

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2017、绘图

作者：邓崇富

撰写时间：2019 年 5 月 26 日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

WPF的基本图形包括一下几个（它们都是Shape类的派生类）：

1. Line：直线段，可以设置其笔触（Stroke）。
2. Rectangle：矩形，既有笔触，又有填充（Fill）。
3. Ellipse：椭圆，长、宽相等的椭圆即为正圆，既有笔触又有填充。
4. Polygon:多边形，由多条直线段围成的闭合区域，既有笔触又有填充。
5. Polyline：折线（不闭合），由多条首尾相接的直线段组成。
6. Path:路径（闭合区域），基本图形中的功能最强大的一个，可由若干直线、圆弧、贝塞尔曲线组成。

1. 直线：

直线是最简单的图形。使用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类型，常用地有：

1. SolidColorBrush:实心画刷。在XAML中可以使用颜色名称字符串（如Red、Blue）直接赋值。
2. LinearGradientBrush:线性渐变画刷。色彩沿着设置地直线方向、按设置地变化点进行渐变。
3. RadilalGradientBrush:径向渐变画刷。色彩沿半径地方向、按设定地变化点进行渐变，形成圆形填充。
4. ImageBrush:使用图片（Image）作为填充内容。
5. 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>

运行效果：

1. 路径：

路径（Path）可以说是WPF绘图中最强大的工具，一来是因为它完全可以替代其它几种图形，二来它可以将直线、圆弧、贝塞尔曲线等基本元素结合进来，形成更复杂的图形。路径最重要的一个属性是Data,Data的数据类型是Geometry（几何图形），我们正是使用这个属性将一些基本的线段连接起来、形成复杂的图形。

为Data属性赋值的语法有两种：一种是标签式的标准语法，另一种是专门用于绘制几何图形的“路径标记语法”。

Geometry的子类包括：

1. LineGeometry:直线几何图形。
2. RectangleGeometry:矩形几何图形。
3. EllipseGeometry:椭圆几何图形。
4. PathGeometry:路径几何图形。
5. StreamGeometry:PathGeometry的轻量级替代品，不支持Binding、动画等功能。
6. CombinedGeometry: 有多个基本几何图形联合在一起，形成地单一几何图形。
7. 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>

运行效果图如下：