Path详解

Path详解

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

开发工具与关键技术：Visual Studio 2015

作者：朱海恩

撰写时间：2019年7月01日

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

WPF提供两个类来描述路径数据：一个是StreamGeometry，另一个是PathFigureCollection。 
<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />的形式是StreamGeometry的XAML代码表示形式，也是最简洁的表示形式。
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF"> 
  <Path.Data> 

<PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" /> 
  </Path.Data> 

</Path> 

这样的方式是使用PathFigureCollection的XAML代码表示方式。以上两种方式的效果差不多，那么什么时候使用哪种方式呢？路径建立后，不需要修改了的话，就使用StreamGeometry方式，如果需要修改，就使用PathFigureCollection方式。

 

下面来解释一下“M 100,240 C510,300 80,100 300,160 H40 v80”这样字符串的意义。

1、M 起始点 或者 m 起始点，注意：使用大写M时，表示绝对值；使用小写m时，表示相对于前一点的值，如果前一点没有指定，则使用(0,0)。

2、绘制指令：

1. 直线:Line(L) ：

格式：L 结束点坐标 或: l 结束点坐标。坐标值可以使用x,y（中间用英文逗号隔开）或x y（中间用半角空格隔开）的形式。

1. 水平直线: Horizontal line(H) ：绘制从当前点到指定x坐标的直线。

格式：H x值 或 h x值(x为System.Double类型的值)

1. 垂直直线: Vertical line(V) ：绘制从当前点到指定y坐标的直线。

格式：V y值 或 v y值(y为System.Double类型的值)

1. 三次方程式贝塞尔曲线: Cubic Bezier curve(C) ：通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。

格式：C 第一控制点 第二控制点 结束点 或 c 第一控制点 第二控制点 结束点

1. 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q) ：通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。

格式：Q 控制点 结束点 或 q 控制点 结束点

1. 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S) ：通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。

格式：S 控制点 结束点 或 s 控制点 结束点

1. 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T) ：与平滑三次方程贝塞尔曲线类似。

格式：T 控制点 结束点 或 t 控制点 结束点

1. 椭圆圆弧: elliptical Arc(A)：在当前点与指定结束点间绘制圆弧。A 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点 或： a 尺寸 圆弧旋转角度值 优势弧的标记 正负角度标记 结束点。

尺寸：指定椭圆圆弧X,Y方向上的半径值。

圆弧旋转角度值：椭圆弧的旋转角度值。

优势弧的标记：是否为优势弧，如果弧的角度大于等于180度，则设为1，否则为0。

 

当我们重复使用同一种类型时，就可以省略前面的命令。比如：L 100, 200 L 300,400简写为：L 100, 200 300,400。

 

<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" />

这里有一个没有见过的Z指令：关闭指令（close Command），表示封闭指定形状，即将首尾连接起来形成封闭的区域。

 

接下来使用StreamGeometry方式来绘制：首先使用直线绘制，绘制完直线后关闭指令，反复的同样的绘制四条直线；然后再使用直线指令和三次方程式贝塞尔曲线指令……..代码如下：

得到的效果如下图所示：

如果对path更加了解的话，还可以绘制出人物等等形状。