Win10系列：C#应用控件进阶6

路径

路径（Path）可以用来定义任意形状的曲线和几何图形，当然这种任意性也带来了复杂性。为了方便的绘制几何图形，微软在Visual Studio 2012安装包中为程序开发者提供了免费的Blend for Visual Studio设计工具，利用这个界面设计工具可以方便的绘制图形。

而对于开发者而言，有必要掌握的是如何通过编写代码的方式实现应用界面的开发，并可以轻松地阅读这些已经绘制好的图形代码。本节将介绍有关路径绘图的相关知识，帮助读者理解Path与PathGeometry的绘图原理。

8.2.1 Path

Path使用一种紧凑的字符串语法来描述几何形状的路径，这种语法可以称为路径标记语法。通过使用路径标记语法定义Data属性能实现几何图形的绘制。下面列出了路径标记语法所支持的常用命令，并对这些命令进行简单的介绍。

• 移动命令，指定新图形的起点StartPoint，用字母M或m表示，大写的M表示起始点的绝对值，小写的m表示起始点相对于前一个点的偏移量。在Data属性中可以同时存在两个M或m命令。
• 绘制命令，它是一个指令集合，用于描述几何图形的形状，例如直线、水平线和三次方贝塞尔曲线命令，将在下面对常用的绘制命令进行介绍。
• 关闭命令，该指令的作用是结束当前绘制图形的操作，并绘制一条连接起始点和结束点的线，使用字母Z表示。

下面通过绘制一段曲线来演示如何使用Path，这段曲线由一条贝赛尔曲线和两条线段组成。在一个打开的Windows应用商店项目中新建一个空白页，并命名为PathPage，双击打开此页面的PathPage.xaml文件，在Grid元素中添加如下代码。

<Path Stroke="DarkGoldenRod" StrokeThickness="3" Data="M 10,10 C 20,100 40,250 200,175 H 280 Z"/>

运行此页面，效果如图8-7所示。

图8-7 path 图形运行效果图

在上面的代码中，首先定义Path的Stroke 属性为DarkGoldenRod、StrokeThickness属性为3，以便Path能呈现。接着定义Path的Data属性，这是决定图形的关键部分，使用M命令开始，指定此路径起点为（10，10）。

接着使用C命令绘制一段三次方贝塞尔曲线，通过定义四个点来创建一个三次方贝塞尔曲线，这四个点是起点、终点及两个控制点。其中起点可以理解为M命令指定的点或上一个路径片段的终点。三次方贝塞尔曲线的两个控制点的作用像磁铁一样，朝着自身的方向吸引本应为直线的部分，从而形成一条曲线。第一个控制点影响曲线的开始部分，第二个控制点影响曲线的结束部分。本示例的三次方贝塞尔曲线由起点 (10，10)、终点(200，175)以及两个控制点 (20，100) 、 (40，250) 绘制而成。

接着使用命令H，该命令从点（200，175）水平绘制到X轴坐标为280的点。最后使用命令Z连接此路径的结束点与起始点。

通过上面的示例相信读者对绘制命令有了一个初步的认识，下面列出几个常用的绘制命令。

• L（直线），表示绘制一条线的命令，例如"L100,100"或"L100 100"。
• H（水平直线），表示在当前点与指定的X轴坐标之间绘制一条水平直线，其中当前点可以理解为M命令指定的起点或上一个路径片段的终点。
• V（竖直直线），表示在当前点与指定的Y轴坐标之间绘制一条竖直线。
• C（三次方贝塞尔曲线命令），通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线，例如"C20,100 40,250 200,175"，其中点（20，100）表示第一个控制点，点（40，250）表示第二个控制点，最后一个点（200，175）表示结束点。