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

news/2024/11/17 2:39:52/

使用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更加小巧轻便,学一下还是很方便后面用的。
欢迎指正补充交流。


http://www.ppmy.cn/news/146738.html

相关文章

TensorFlow 删除 YAML 支持,建议 JSON 作为替补方案!

TensorFlow&#xff0c;作为一个主流的开源 Python 库&#xff0c;最初由 Google 开发用于机器学习领域&#xff0c;逐渐成为 GitHub 顶级开源 TOP 10 项目之一。 近日&#xff0c;Google TensorFlow 项目团队宣布了一项重大的改变&#xff0c;由于存在一个关键代码执行漏洞&a…

svg画半圆详解(L指令、M指令、A指令)

svg画半圆 了解画半圆的各个指令L指令M指令A指令画整半圆 推荐&#xff1a;svg画整圆详解推荐&#xff1a;svg的text标签字体、颜色、样式、大小、居中详解 接到需求&#xff0c;要求做出一个这样的活动转盘&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c;所有文…

倍福---通过EL6070授权流程

TwinCAT 3.1提供了通过EtherCAT终端EL6070管理TwinCAT软件许可证的选项。EL6070包含模块化EtherCAT I/O系统中的硬件许可证密钥。本文介绍基于EL6070模块做授权的操作流程。 操作流程 1.1. EL6070模块介绍 1.1.1. 外观 TwinCAT 3.1提供了通过EtherCAT终端EL6070管理TwinCAT软件…

使用HbuilderX3.8.3_把开发的小程序发布为Html5页面上传到_免费托管空间---uniapp_小程序开发工作笔记009

首先使用hbuider开发完程序,然后,再去,点击发型,然后选择 上传网站到服务器,然后选择 选择新建,然后点击 新建以后然后这里点击新建服务空间,然后再去 这里选择免费服务空间,然后 然后点击立即购买,然后 点

用DIV+CSS技术制作个人博客网站(web前端网页制作课期末作业)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

L10

1.利用牛客的递推方法&#xff1a; class Solution {public boolean isMatch(String s, String p) {if(s null || p null) return false;char[] str s.toCharArray();char[] pattern p.toCharArray();return judge(str, 0, pattern, 0);}public boolean judge(char[]str, …

对于时间期间标识,怎么拆分运算的?

业务需求&#xff1a;薪资核算时&#xff0c;系统会根据核算期间员工的状态&#xff0c;将数据拆分成不同的期间段&#xff0c;以用作逻辑处理&#xff0c;造成时间期间标识分段的常见原因有&#xff1a;员工人事事件发生变动&#xff08;如&#xff1a;入职、调动、离职、转正…

地形剖面图、纬度高度剖面图如何绘制

在气象中&#xff0c;我们常常需要用到剖面图。地形剖面主要研究地貌对降雨、气流的影响作用&#xff1b;纬度高度剖面图主要用来分析降雨的某些条件&#xff0c;如湿层深厚、上干下湿、风向风速等。 一、地形剖面图 绘制地形剖面图之前&#xff0c;需要了解自己使用的地形文件…