前言:Silverlight 2.0 Beta1 已经发布,加入了许多激动人心的新特性:WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记,写的比较乱,因此定名为乱弹琴Silverlight 2.0 系列文章。
本篇几何图形(Geometry)中的路径标记语法。
路径标记语法可简洁高效地定义路径几何形状。
路径标记语法有有限的几个命令,但能实现复杂的图形。
移动命令
M startPoint:startPoint是绝对坐标值。
m startPoint:startPoint是相对于上一个点的偏移量。
作用是指定图形新的起点。
该命令后可以跟多个点,但多个点之间默认添加了连接线。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5" Data="M 10,80 200,200 350,80"></Path>
</Grid>
运行效果:
绘图命令
绘图命令有多个,可绘制不同的形状。
·直线:
L或l endPoint:当前点和指定点之间画一条直线。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5" Data="M 10,80 L 380,280"></Path>
</Grid>
运行效果:
·水平线:
H或h x:当前点和指定x坐标之间画一条水平线。
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5" Data="M 10,80 H 380"></Path>
</Grid>
运行效果:
·垂线:
V或v y:当前点和指定y坐标之间画一条垂线。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5" Data="M 100,10 v 280"></Path>
</Grid>
运行效果:
·三次贝塞尔曲线:
C或c cPoint1 cPoint2 endPoint:当前点和指定终点在两个控制点的作用下画一条三次贝塞尔曲线。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5"
Data="M 50,100 c 100,200 200,10 320,100"></Path>
</Grid>
运行效果:
·二次贝塞尔曲线:
Q或q cPoint endPoint:当前点和指定终点在控制点的作用下画一条二次贝塞尔曲线。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5"
Data="M 50,100 Q 100,200 320,100"></Path>
</Grid>
运行效果:
·平滑的三次贝塞尔曲线:
S或s cPoint2 endPoint:在当前点与指定的终点之间创建一条三次方贝塞尔曲线。第一个控制点假定为前一个命令的第二个控制点相对于当前点的反射。如果前一个命令不存在,或者前一个命令不是三次方贝塞尔曲线命令或平滑的三次方贝塞尔曲线命令,则假定第一个控制点就是当前点。第二个控制点,即曲线终端的控制点,由controlPoint2 指定。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5"
Data="M 50,100 S 100,200 320,100"></Path>
</Grid>
运行效果:
·平滑的二次贝塞尔曲线:
T或t cPoint endPoint:在当前点与指定的终点之间创建一条二次贝塞尔曲线。控制点假定为前一个命令的控制点相对于当前点的反射。如果前一个命令不存在,或者前一个命令不是二次贝塞尔曲线命令或平滑的二次贝塞尔曲线命令,则此控制点就是当前点。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5"
Data="M 50,100 T 100,200 320,100"></Path>
</Grid>
运行效果:
·椭圆弧线:
A或a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint:在当前点与指定的终点之间创建一条椭圆弧线。
其中:
size:弧线的 x 轴半径和 y 轴半径。
rotationAngle:椭圆的旋转度数。
isLargeArcFlag:如果弧线的角度应大于或等于180度,则设置为1;否则设置为0。
sweepDirectionFlag: 如果弧线按照正角方向绘制,则设置为1;否则设置为0。
endPoint:弧线将绘制到的点。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5"
Data="M 10,200 A 50,100 60 1 1 320,100"></Path>
</Grid>
运行效果:
关闭命令:
Z或z。关闭命令连接路径的终点和起始点组成闭合的曲线。如果命令中遇到M或m,则移动后的点作为新的起点,Z命令连接终点和该起始点。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="5"
Data="M 10,200 A 50,100 60 1 1 320,100 Z"></Path>
</Grid>
运行效果:
特殊值:
除标准数值以外,您还可以使用以下特殊值。这些值区分大小写。
Infinity:表示 Double.PositiveInfinity。
-Infinity:表示 Double.NegativeInfinity。
NaN :表示Double.NaN。
此外,还可以使用科学计数法。例如,+6.18e10 是有效值。
结束语:
路径标记语法有限的命令能实现绘制复杂的图形,但有其缺点,如不支持修改、不支持动画等。下一篇介绍PathGeometry类创建几何图形。