WPF 形状图形

精选转载

尹道俊 2013-09-06 17:55:59 博主文章分类：WPF/SilverLight

文章标签 WPF 形状图形 文章分类 运维

形状是 WPF 的核心元素。利用形状，可以绘制矩形、线条、椭圆、路径、多边形和多义线等二维图形，这些图形用派生自抽象类 Shape 的类表示。图形在 System.Windows.Shape 命名空间中定义。

System.Windows.Shape 命名空间下的类

1. Line

可以在坐标(X1,Y1)到(X2,Y2)之间绘制一条线。

2. Rectangle

使用 Rectangle 类，可以指定 Width 和 Height，绘制一个矩形。

3. Ellipse

使用 Ellipse 类，可以绘制一个椭圆。

4. Path

使用 Path 类可以绘制一系列直线和曲线。Data 属性是 Gemometry 类型。还可以使用派生自基类 Geometry 的类绘制图形，或使用路径标记语法来定义图形。

5. Polygon

使用 Polygon 类可以绘制由线段连接而成的封闭图形。多边形由一系列赋予 Points 属性的 Point 对象定义。

6. PolyLine

使用 PolyLine 类可以绘制多义线。类似于 Polygon 类，使用 PolyLine 也可以绘制连接起来的线段，与多边形的区别是多义线不一定是封闭图形。

下面重点介绍下 Path

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方式呢？
一般地，当你建立路径后，不再需要修改时，可使用StreamGeometry方式，如果还需要对路径数值进行修改，则使用PathFigureCollection方式（这里就是PathGeometry）。

下面来解释一下“M 100,240 C510,300 80,100 300,160 H40 v80”这样字符串的意义。
分为四种情况来解释：
1. 移动指令：Move Command（M）：M 起始点或者：m 起始点
比如：M 100,240或m 100,240
使用大写M时，表示绝对值; 使用小写m时，表示相对于前一点的值，如果前一点没有指定，则使用(0,0)。

2. 绘制指令(Draw Command):
我们可以绘制以下形状：
(1) 直线:Line(L)
(2) 水平直线: Horizontal line(H)
(3) 垂直直线: Vertical line(V)
(4) 三次方程式贝塞尔曲线: Cubic Bezier curve(C)
(5) 二次方程式贝塞尔曲线: Quadratic Bezier curve(Q)
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)
(8) 椭圆圆弧: elliptical Arc(A)

上面每种形状后用括号括起的英文字母为命令简写的大写形式，但你也可以使用小写。使用大写与小写的区别是：大写是绝对值，小写是相对值。

比如：L 100, 200 L 300,400表示从绝对坐标点(100,200)到另一绝对坐标点(300,400)的一条直线。而l 100, 200 l 300,400则表示相对上一点（如果未指定，则默认为(0,0)坐标点）开始计算的坐标点(100,200)到坐标点为(300,400)的一条直线。

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

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

绘制指令格式语法:

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

(2) 水平直线 Horizontal line(H)：绘制从当前点到指定x坐标的直线。
格式：H x值或 h x值(x为System.Double类型的值)
比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。

(3) 垂直直线 Vertical line(V)：绘制从当前点到指定y坐标的直线。
格式：V y值或 v y值(y为System.Double类型的值)
比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。

(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(C)：通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式：C 第一控制点第二控制点结束点或 c 第一控制点第二控制点结束点
比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中，点(100,200)为第一控制点，点(200,400)为第二控制点，点(300,200)为结束点。

(5) 二次方程式贝塞尔曲线 Quadratic Bezier curve(Q)：通过指定的一个控制点来绘制由当前点到指定结束点间的二次方程贝塞尔曲线。
格式：Q 控制点结束点或 q 控制点结束点
比如：q 100,200 300,200。其中，点(100,200)为控制点，点(300,200)为结束点。

(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)：通过一个指定点来“平滑地”控制当前点到指定点的贝塞尔曲线。
格式：S 控制点结束点或 s 控制点结束点
比如：S 100,200 200,300

(7) 平滑二次方程式贝塞尔曲线 smooth quadratic Bezier curve(T)：与平滑三次方程贝塞尔曲线类似。
格式：T 控制点结束点或 t 控制点结束点
比如：T 100,200 200,300

(8) 椭圆圆弧: elliptical Arc(A) : 在当前点与指定结束点间绘制圆弧。
A 尺寸圆弧旋转角度值优势弧的标记正负角度标记结束点
或：
a 尺寸圆弧旋转角度值优势弧的标记正负角度标记结束点
尺寸(Size): System.Windows.Size类型，指定椭圆圆弧X,Y方向上的半径值。
旋转角度（rotationAngle）：System.Double类型。
圆弧旋转角度值（rotationAngle）：椭圆弧的旋转角度值。
优势弧的标记（isLargeArcFlag）：是否为优势弧，如果弧的角度大于等于180度，则设为1，否则为0。
正负角度标记（sweepDirectionFlag）：当正角方向绘制时设为1，否则为0。
结束点（endPoint）：System.Windows.Point类型。

3. 关闭指令(close Command):用以将图形的首、尾点用直线连接，以形成一个封闭的区域。
用Z或z表示