WPF:Path详解,包括直线(LineSegment)弧线(ArcSegment)贝塞尔曲线(BezierSegment)
使用Path作图,有两种方法设置Path.Data:使用PathGeometry对象如:画的是一个带箭头边框。Path.Data由一些列的Segment组合而成。<Path Stroke="Red"><Path.Data><PathGeometry><PathFigure StartPoint="5,0" IsClosed="True"><Ar
·
使用Path作图,有两种方法设置Path.Data
:
- 使用
PathGeometry
对象
如:画的是一个带箭头边框。Path.Data
由一系列的Segment组合而成。
<Path Stroke="Red">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="5,0" IsClosed="True">
<ArcSegment Point="0,5" Size="5,5" SweepDirection="Counterclockwise"/>
<LineSegment Point="0,95"/>
<ArcSegment Point="5,100" Size="5,5"/>
<LineSegment Point="45,100"/>
<LineSegment Point="50,105"/>
<LineSegment Point="55,100"/>
<LineSegment Point="95,100"/>
<ArcSegment Point="100,95" Size="5,5"/>
<LineSegment Point="100,5"/>
<ArcSegment Point="95,0" Size="5,5" SweepDirection="Counterclockwise"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
2. 使用StreamGeometry
对象(详解)
有如下几个命令
名称 | 说明 |
---|---|
M x,y | 图像起点,可以在绘制序列期间改变的 |
L x,y | 创建一条到指定点(x,y)的直线(LineSegment) |
H x | 使用x值创建一条水平线,y值不变 |
V y | 使用y值创建一条垂直线,x值不变 |
A radiusX,radiusY degree isLargeArc isClockwise x,y | 创建到指定点(x,y)的弧,参数为:弧所在椭圆的两个半径、弧旋转角度、是否是大(小)弧、是否顺时针画 |
Q x1,y1 x,y | 通过控制点(x1,y1)画到指定点(x,y)的二阶贝塞尔曲线 |
C x1,y1,x2,y2 x,y | 通过控制点(x1,y1)、(x2,y2)画到指定点(x,y)的三阶贝塞尔曲线 |
S x2,y2 x,y | 通过将前一条贝塞尔曲线的第二个控制点作为新建贝塞尔曲线的第一个控制点,从而创建一条光滑的贝塞尔曲线(hhh不懂) |
Z | 关闭,连接第一个点,最后一个点 |
接下来,我们一个一个看看效果
代码:
<!--第1部分-->
<Path Stroke="Red" StrokeThickness="2" Data="M0,0 L100,0 H200 V20"/>
<Path Stroke="Green" StrokeThickness="2" Data="M200,20 h20 v20"/>
<!--第2部分-->
<Path Stroke="Red" StrokeThickness="2" Data="M0,100 A5,10 -10 0 0 40,100"/>
<Path Stroke="Green" StrokeThickness="2" Data="M100,100 A50,50 0 0 1 140,100"/>
<Path Stroke="Blue" StrokeThickness="2" Data="M200,100 A50,50 0 1 0 240,100"/>
<!--第3部分-->
<Path Stroke="Red" StrokeThickness="2" Data="M0,200 Q100,200 100,240"/>
<!--第4部分-->
<Path Stroke="Green" StrokeThickness="2" Data="M0,300 C0,400,100,400 100,300"/>
<!--第5部分-->
<Path Stroke="Blue" StrokeThickness="2" Data="M200,300 S300,300 300,400"/>
<!--第6部分-->
<Path Stroke="Red" StrokeThickness="1" Data="M0,400 L100,400 L100,420 Z"/>
解释:
图中的小方格,长度是20。大写字母表示使用绝对坐标系,小写字母表示相对坐标系。
关于贝塞尔曲线可以去看这里。
- 第1部分
M0,0
从左上角原点开始
L100,0
到目标点(100,0)画一条直线,长度100
H200
由于是大写字母,虽然长度是200,但用的绝对坐标系,所以有一部分和上面一条指定的直线重合
V20
画一条长度20的垂直线
M200,20 h20 v20
将起点移到(200,20),使用相对坐标系,画两条长度为20的水平垂直线。
(去掉M200,20
,两行代码可以合在一起,写成两行主要是为了区分颜色,看得更清楚) - 第2部分
M0,100 A5,10 -10 0 0 40,100
,起点是(0,100),终点是(40,100),画一个弧,弧所在椭圆半径是5和10,旋转-10度,不是大弧,不是顺时针
M100,100 A50,50 0 0 1 140,100
,起点是(100,100),终点是(140,100),画一个弧,弧所在椭圆半径是50和50,旋转0度,不是大弧,是顺时针
M200,100 A50,50 0 1 0 240,100
,起点是(200,100),终点是(240,100),画一个弧,弧所在椭圆半径是50和50,旋转0度,是大弧,不是顺时针。和上面的弧合起来就是个半径为50的圆。 - 第3部分
M0,200 Q100,200 100,240
,起点是(0,200),终点是(100,240),中间控制点是(100,200),画一个二阶贝塞尔曲线 - 第4部分
M0,300 C0,400,100,400 100,300
,起点是(0,300),终点是(100,300),中间控制点是(0,400)、(100,400),画一个三阶贝塞尔曲线 - 第5部分
M200,300 S300,300 300,400
,起点是(200,300),终点是(300,400),中间控制点是(300,300),画一个平滑的贝塞尔曲线(没搞懂) - 第6部分
M0,400 L100,400 L100,420 Z
封闭的形状
虽然一些图标可以用图片去代替,但是Path更加小巧轻便,学一下还是很方便后面用的。
欢迎指正补充交流。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)