WPF入门到跪下 第六章 图形-绘制

图形控件

WPF中的图形控件都为Shape类的子类，因此具有一定的共性。

常用属性

Fill：获取或设置图形控件的画刷，Brush类型。

• 在XAML中可以直接输入对应颜色的字符串，在C#中则可以借助Brushes类，例如Brushes.Gray。

Stretch：画刷的拉伸方式。

Stroke：图形控件的边界画刷，Brush类型。

StrokeThickness：图形控件的边界粗细。

StrokeDashArray：用于设置边界线条的实线与间隔比例的集合，一般用来设置虚线边框，例如StrokeDashArray="1 2"表示实线占1格、间隔占两格，重复铺满；StrokeDashArray="1 2 2 3"表示实线占1格、间隔占两格、实线占2格、间隔占3格，重复铺满。需要注意的是，当StrokeDashArray设置为奇数时有点特殊，会将集合扩充2倍变成偶数，例如StrokeDashArray="1 2 2"，实际效果是StrokeDashArray="1 2 2 1 2 2"。

StrokeDashCap：获取或设置一个PenLineCap枚举值，该值指定如何绘制虚线的两端。

StrokeStartLineCap/StrokeEndLineCap：获取或设置一个PenLineCap枚举值，该值指定如何绘制线段的起点和终点。

• 注意，这里对实心线段起效果，闭合的线和虚线无效。
• PenLineCap：有Flat、Square、Round、Triangle四个值，效果分别如下：
  

<Grid>
    <Line X1="0" Y1="20" X2="100" Y2="20" StrokeThickness="2" Stroke="red" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
    <Line X1="0" Y1="40" X2="100" Y2="40" StrokeThickness="2" Stroke="red" StrokeDashArray="1 2" StrokeDashCap="Round"/>
</Grid>

StrokeDashOffset：获取或设置一个 Double，表示虚线样式内虚线开始处的距离，默认为0。

• 试了一下，默认情况下虚线的开头是贴着控件左侧的，如果设置了StrokeDashOffset，数字变大，虚线则往左侧移动响应距离；变小，则往左侧移动响应距离
• 可以通过动画改变这个属性来实现流动效果。

常用图形

直线

<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Red" StrokeThickness="1"/>

矩形

RadiusX、RadiusY分别为四个角X轴和Y轴上的圆角半径，需要一起使用。

<Rectangle  Width="500" Height="80" RadiusX="100" RadiusY="50" Fill="Orange"/>

椭圆（圆）

Width、Height分别为圆的宽度和高度。

<Ellipse Width="100" Height="100" Stroke="Red"/>

多段线

Points为多段线各个点的位置，需要注意的是每个位置都是以所在空间的左上角为0,0作为起始点的。

<Polyline Points="0,0 100,50 150,50" Stroke="Blue"/>

多边形

多边形的用法与多段线是一样的，其形状也是一样的，只不过多边形会将起始点和结束点连接起来。

<Polygon Points="0,0 100,50 150,50" Stroke="Black"/>

几何图形

使用几何图形就要说到一个较为特殊的图形对象Path，几何图形控件需要在Path中使用，颜色（Stroke）、粗细（StrokeThickness）等属性统一在Path中进行定义，而几何图形自己的一些特性则在自身控件中进行定义。

Path的其他常用属性

StrokeStartLineCap：图形起始点的边缘图形，为PenLineCap枚举类型。

• Flat：一个未超出直线上最后一点的线帽。 等同于无线帽。（默认）
• Square：一个高度等于直线粗细、长度等于直线粗细一半的矩形。
• Round：一个直径等于直线粗细的半圆形。
• Triangle：一个底边长度等于直线粗细的等腰直角三角形。

StrokeEndLineCap：图形结束点的边缘图形，为PenLineCap枚举类型，用法跟StrokeStartLineCap一样。

一、常用几何图形

直线-LineGeometry

<Path Stroke="Red" StrokeThickness="1">
    <Path.Data>
        <LineGeometry StartPoint="1,1" EndPoint="100 100"/>
    </Path.Data>
</Path>

矩形-RectangleGeometry

Rect分别为起点的X轴坐标、Y轴坐标；宽度、高度。

<Path Stroke="Red" StrokeThickness="1">
    <Path.Data>
        <RectangleGeometry Rect="50 0 100 50" RadiusX="10" RadiusY="10"/>
    </Path.Data>
</Path>

椭圆-EllipseGeometry

Center为中心点、RadiusX以中心点为起点，X轴上的半径、RadiusY以中心点为起点，Y轴上的半径。

<Path Stroke="Red" StrokeThickness="1">
    <Path.Data>
        <EllipseGeometry Center="0 0" RadiusX="20" RadiusY="20"/>
    </Path.Data>
</Path>

二、几何图形组合

1、分组

在Path中，可以通过GeometryGroup元素将多个几何图形分为同一组，然后通过Path统一控制样式。

<Path Stroke="Red" StrokeThickness="1" Fill="Blue">
    <Path.Data>
        <GeometryGroup>
            <LineGeometry StartPoint="1,1" EndPoint="100 100"/>
            <RectangleGeometry Rect="50 0 100 50"/>
            <EllipseGeometry Center="50 50" RadiusX="20" RadiusY="20"/>
        </GeometryGroup>
    </Path.Data>
</Path>

填充模式

上面的例子中，图形重叠部分在进行填充时，交叉部分默认是不填充的，如果希望交叉部分也进行填充，可以将GeometryGroup元素的FillRule属性修改为NonZero

FillRule：GeometryGroup的属性成员，默认为EvenOdd，即不填充交叉区域，如果希望填充交叉区域，可以设置为NonZero。

• 注意，尝试了一下，GeometryGroup的FillRule属性对LineGeometry 、RectangleGeometry 、EllipseGeometry 图形有效，对PathGeometry无效，暂时没搞清楚是为什么。

2、几何图形运算

查看上文中GeometryGroup元素分组后的几何图形，在进行颜色填充时，默认情况下是避开了重叠部分的。那能不能根据实际需求，对组合的几何图形进行选择性填充呢？当然是可以的，这就需要使用CombinedGeometry元素了。

CombinedGeometry可以将两个几何图形进行组合，并通过GeometryCombineMode属性来实现图形的并集、差集、交集运算。

GeometryCombineMode的有效值如下：

• Exclude：差集运算。
• Intersect：交集运算。
• Union：并集运算（默认）。
• Xor：交集取反，效果跟GeometryGroup一样。

<Path Stroke="Red" StrokeThickness="1" Fill="Blue">
    <Path.Data>
        <CombinedGeometry GeometryCombineMode="Union">
            <CombinedGeometry.Geometry1>
                <RectangleGeometry Rect="50 0 100 50"/>
            </CombinedGeometry.Geometry1>
            <CombinedGeometry.Geometry2>
                <EllipseGeometry Center="50 50" RadiusX="20" RadiusY="20"/>
            </CombinedGeometry.Geometry2>
        </CombinedGeometry>
    </Path.Data>
</Path>

不规则图形

在WPF中，想要绘制不规则图形，可以通过Path元素的子元素Path.Data中的PathGeometry元素来实现。

PathGeometry可以实现片段绘制，将不同类型的图形连续绘制，得到想要的不规则图形。

PathGeometry中的子元素PathFigure可以通过其StartPoint属性来设置整个图形的起始点，然后将其他片段元素放在PathFigure元素内，WPF会根据片段顺序及片段属性，依次进行绘制。

• 在PathFigure元素内的片段元素，设置的Point属性为终点位置。
• 如果最后头尾的线段希望闭合，可以设置PathFigure元素的IsClosed属性为True。

<Path Stroke="Red" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
						<!--设置起点位置-->
            <PathFigure StartPoint="0 0">
								<!--Point为直线的终点位置-->
                <LineSegment Point="50 50"/>
								<!--ArcSegment：椭圆弧、Point：终点位置、Size：宽度与高度、SweepDirection：顺时针/逆时针、
                    IsLargeArc：一般情况下两个点之间同样的宽高可以画出大小两个弧，取大弧还是取小弧。
                -->
                <ArcSegment Point="100 100"  Size="50 50" SweepDirection="Clockwise" IsLargeArc="True"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

PathGeometry实际上是一个集合类型，因此可以放入多个PathFigure。

Path微语言

在WPF中，使用Path元素配合一些特定的指令（微语言），可以很便捷实现绘画效果。

坐标移动指令

MX,Y：M指令用于坐标移动，也就是指定绘制的起始点。(将所在容器的左上角作为零点来计算结束点)

mX,Y：m指令用于坐标移动，也就是指定绘制的起始点。(将上一个结束点作为零点来计算结束点)

直线指令

LX,Y：L表示绘制直线，指定绘制的结束点（将所在容器的左上角作为零点来计算结束点）。

lX,Y：l表示绘制直线，指定绘制的结束点（将绘制起点作为零点来计算结束点）。

<Path Data="M0,0 L100,100 m0,0 l100,0" Stroke="Red" StrokeThickness="1"/>

水平指令

HX：H表示向水平方向绘制直线，X表示绘制距离（将所在容器的左上角作为零点来计算结束点）。

hX：h表示向水平方向绘制直线，X表示绘制距离（将绘制起点作为零点来计算结束点）。

垂直指令

VY：H表示向垂直方向绘制直线，Y表示绘制距离（将所在容器的左上角作为零点来计算结束点）。

vY：v表示向垂直方向绘制直线，Y表示绘制距离（将绘制起点作为零点来计算结束点）。

<Path Data="M0,200 h100 v100 h100 v-100 h100 v100 h100 v-100" Stroke="Red"/>

圆弧指令

AWidth,Height,Angle,IsLargeArc,SweepDirection,X,Y：A表示绘制弧线，分别几个参数分别表示圆弧宽度半径、高度半径、旋转角度、是否为优势弧、扫掠方向、结束点。（将所在容器的左上角作为零点来计算结束点）

aWidth,Height,Angle,IsLargeArc,SweepDirection,X,Y：a表示绘制弧线，将绘制起点作为零点来计算结束点。

<Path Data="M0,200 A100,100,0,1,0,100,100" Stroke="Red"/>

二次贝塞尔曲线

QX1,Y1,X2,Y2：Q表示绘制二次贝塞尔曲线，第一个坐标点为控制点，第二个坐标点为绘制结束点（将所在容器的左上角作为零点来计算结束点）。

qX1,Y1,X2,Y2：q表示绘制二次贝塞尔曲线，第一个坐标点为控制点，第二个坐标点为绘制结束点（将绘制起点作为零点来计算结束点）

绘制原理：起点到结束点之间的连线要与控制点和结束点相连的直线相切。

<Path Data="M100,100 Q300,200,200,300" Stroke="Red"/>

平滑指令

TX1,Y1,X2,Y2：T表示绘制平滑曲线，第一个坐标点为控制点，第二个坐标点为绘制结束点（将所在容器的左上角作为零点来计算结束点）。

tX1,Y1,X2,Y2：t表示绘制二次贝塞尔曲线，第一个坐标点为控制点，第二个坐标点为绘制结束点（将绘制起点作为零点来计算结束点）。

绘制原理：起点到控制点到结束点连接成线，其中起点到控制点为直线，控制点到结束点为平滑过度的曲线。与二次贝塞尔曲线可以形成闭合图形，平滑曲线包含了控制点，而二次贝塞尔曲线则不包含。

<Path Data="M100,100 Q300,200,200,300" Stroke="Red"/>
<Path Data="M100,100 T300,200,200,300" Stroke="Red"/>

三次贝塞尔曲线

CX1,Y1,X2,Y2,X3,Y3：C表示绘制三次贝塞尔曲线，第一个坐标为控制点1，第二个坐标为控制点2，第三个坐标为绘制结束点（将所在容器的左上角作为零点来计算结束点）。

cX1,Y1,X2,Y2,X3,Y3：c表示绘制三次贝塞尔曲线，第一个坐标为控制点1，第二个坐标为控制点2，第三个坐标为绘制结束点（将绘制起点作为零点来计算结束点）。

绘制原理：起点到结束点之间的连线要同时与起始点与控制点1相连的直线、控制点2与结束点相连的直线相切。

<Path Data="M100,100 C200,50,200,300,300,100" Stroke="Red"/>

关闭指令

Z：Z表示关闭指令，用在绘制指令的最后面，将整个绘制过程的起始点与结束点连接起来

<Path Data="M100,100 C200,50,200,300,300,100 Z" Stroke="Red"/>

注意

实际上当直接使用微语言创建几何图形时，默认是创建了StreamGeometry对象而不是PathGeometry对象，因此一旦创建了图形，是无法修改的。如果希望在运行时修改图形，可以显式的创建PathGeometry对象，但使用相同的语法设置其Figures属性即可。

• 示例

  <Path StrokeThickness="1">
      <Path.Data>
          <PathGeometry Figures="M5,0 L0,5 L5,10 Z"/>
      </Path.Data>
  </Path>