WPF:Path详解,包括直线(LineSegment)弧线(ArcSegment)贝塞尔曲线(BezierSegment)

使用Path作图,有两种方法设置Path.Data

  1. 使用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. 第1部分
    M0,0从左上角原点开始
    L100,0到目标点(100,0)画一条直线,长度100
    H200由于是大写字母,虽然长度是200,但用的绝对坐标系,所以有一部分和上面一条指定的直线重合
    V20画一条长度20的垂直线
    M200,20 h20 v20将起点移到(200,20),使用相对坐标系,画两条长度为20的水平垂直线。
    (去掉M200,20,两行代码可以合在一起,写成两行主要是为了区分颜色,看得更清楚)
  2. 第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. 第3部分
    M0,200 Q100,200 100,240,起点是(0,200),终点是(100,240),中间控制点是(100,200),画一个二阶贝塞尔曲线
  4. 第4部分
    M0,300 C0,400,100,400 100,300,起点是(0,300),终点是(100,300),中间控制点是(0,400)、(100,400),画一个三阶贝塞尔曲线
  5. 第5部分
    M200,300 S300,300 300,400,起点是(200,300),终点是(300,400),中间控制点是(300,300),画一个平滑的贝塞尔曲线(没搞懂)
  6. 第6部分
    M0,400 L100,400 L100,420 Z封闭的形状

虽然一些图标可以用图片去代替,但是Path更加小巧轻便,学一下还是很方便后面用的。
欢迎指正补充交流。

  • 4
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值