Path的使用-path绘制折线的时候带上圆角

场景:

使用antv-g6 自定义边的时候,绘制折线,此时都是直角,需要加圆角,没找到属性,自己绘制:

最后使用了A(elliptical Arc)弧形

A命令用于画弧形。

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

参数说明

  • 弧形命令A前两个参数rx和ry分别是x轴半径和y轴半径。
  • 弧形命令A的第三个参数表示弧形的旋转情况。
  • large-arc-flag决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧。
  • sweep-flag表示弧线的方向,0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧。
  • x:结束点x坐标。
  • y:结束点y坐标
<svg width="400px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="red" stroke-width="2" fill-opacity="0.5"/>
</svg>

在这里插入图片描述
代码解析:

画布上有一条对角线,中间有两个椭圆弧被对角线切开(x radius = 30, y radius = 50)。

第一个椭圆弧的x-axis-rotation(x轴旋转角度)是0,所以弧形所在的椭圆是正置的(没有倾斜)。

在第二个椭圆弧中,x-axis-rotation设置为-45,所以这是一个旋转了45度的椭圆,并以短轴为分割线,形成了两个对称的弧形。

参考文章:https://blog.csdn.net/y281252548/article/details/127464369

path的坐标命令

先采用总分的形式吧。

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
    然后一个个来介绍主要分为直线命令和曲线命令

直线命令

直线命令主要有以下几种:

  • M(moveto):需要两个参数(x轴和y轴坐标,移动到的点的x轴和y轴的坐标
  • L(lineto):需要两个参数(x轴和y轴坐标),它会在当前位置和最新的位置(L前面画笔所在的点)之间画一条线段。
  • H(horizontal lineto):一个参数,标明在x轴移动到的位置,绘制水平线
  • V(vertical lineto):一个参数,标明在y轴移动到的位置,绘制垂直线
  • Z( closepath):从当前点画一条直线到路径的起点
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>

在这里插入图片描述
代码解析:

首先定义了一个100x100的画布(坐标系),用M命令在(10,10)创建起点,通过H命令在水平方向移动到x轴为90的位置,y轴不变,也就是移动到(90, 10),再通过V命令移动到y轴为90的位置,x轴不变,也就是坐标为(90,90)的位置,再通过H命令在水平方向移动到x轴为10的位置,y轴不变,此刻的位置为(10,90),最后使用L命令在起点(10,10)的位置与上次的点(10,90)画一条直线,那么四条边就画完了。

其他参考:https://zhuanlan.zhihu.com/p/593004501

直线路径 path
其实在 SVG 里,所有基本图形都是 的简写。所有描述轮廓的数据都放在 d 属性里,d 是 data 的简写。

d 属性又包括以下主要的关键字(注意大小写!):

M: 起始点坐标,moveto 的意思。每个路径都必须以 M 开始。M 传入 x 和 y 坐标,用逗号或者空格隔开。
L: 轮廓坐标,lineto 的意思。L 是跟在 M 后面的。它也是可以传入一个或多个坐标。大写的 L 是一个绝对位置。
l: 这是小写 L,和 L 的作用差不多,但 l 是一个相对位置。
H: 和上一个点的Y坐标相等,是 horizontal lineto 的意思。它是一个绝对位置。
h: 和 H 差不多,但 h 使用的是相对定位。
V: 和上一个点的X坐标相等,是vertical lineto 的意思。它是一个绝对位置。
v: 这是一个小写的 v ,和大写 V 的差不多,但小写 v 是一个相对定位。
Z: 关闭当前路径,closepath 的意思。它会绘制一条直线回到当前子路径的起点。

https://blog.csdn.net/weixin_42289080/article/details/130690338

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/236121.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于单个参数线性回归的机器学习代码

本文为学习吴恩达版本机器学习教程的代码整理&#xff0c;使用的数据集为https://github.com/fengdu78/Coursera-ML-AndrewNg-Notes/blob/f2757f85b99a2b800f4c2e3e9ea967d9e17dfbd8/code/ex1-linear%20regression/ex1data1.txt 将数据集和py代码放到同一目录中&#xff0c;使…

超参数优化的多功能贝叶斯优化包SMAC3

地址 关键词 Bayesian optimization, hyperparameter optimization, SMAC3 文章概述 本文介绍了SMAC3&#xff0c;一个用于超参数优化的多功能贝叶斯优化包。SMAC3使用随机森林作为代理模型&#xff0c;并结合了多样性的BO和强化策略&#xff0c;如积极竞赛和多样性方法…

如何使用DC电源模块进行快速原型开发

如何使用DC电源模块进行快速原型开发 BOSHIDA DC电源模块是一种用于转换电源电压的电子元件&#xff0c;它可以把输入的直流电压转换为不同的输出电压&#xff0c;让我们可以在无需改变设备硬件的情况下&#xff0c;实现电压的升降。它广泛应用于不同的电子设备中&#xff0c;…

【数字经济】你必须知道的SABOE数字化转型

【文末送书】今天推荐一本企业管理类前沿书籍《企业架构驱动数字化转型&#xff1a;以架构为中心的端到端转型方法论》 目录 01传统企业数字化转型面临诸多挑战02SABOE数字化转型五环法为企业转型破除迷雾03文末送书 01传统企业数字化转型面临诸多挑战 即将过去的2023年&#…

​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案

随着“第四次工业革命”的爆炸式发展&#xff0c;众多企业都将自己的业务与迅速发展的应用开发和网站建设领域高度绑定。而对于众多有上云需求的企业和个人用户来说&#xff0c;选择一款自己的服务器配置就成为了一项至关重要的任务。而随着需求端的不断扩大&#xff0c;云服务…

SD-WAN VS MPLS :怎么选择最合适的网络连接方案?

随着企业网络需求的不断增长&#xff0c;网络连接方案也变得更加多样化。在这种情况下&#xff0c;SD-WAN和MPLS成为了企业考虑的两种主要选择。本文将就SD-WAN和MPLS这两种网络连接方案进行比较&#xff0c;深入探讨它们在成本、体验、部署周期和运维等方面的差异。 1、成本投…

050:vue项目webpack打包,大文件分成几个小文件的方法

第050个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

[PTP][Announce] ClockIdentity 定义规则

文章目录 一、简介二、格式三、备注 一、简介 ClockIdentity: 时钟标识, 8个字节&#xff0c;采用IEEE MAC48编码方式 二、格式 PTP实例的clockIdentity值应符合802.1AS的8.5.2.2中的规定。 如下&#xff08;8.5.2.2中描述了1588-2019的内容&#xff09;&#xff1a; clockI…

城市生态与交通,数据可视化大屏,PSD源文件(ps大屏设计素材)

用酷炫的大屏展示其城市的生态与交通情况&#xff0c;辅助相关决策。好的大屏组件也可以让设计师的工作更加便捷&#xff0c;使其更高效快速的完成设计任务。现分享城市生态与交通的大屏Photoshop源文件&#xff0c;开箱即用&#xff01;以下为部分截图示意。 若需更多的 智慧…

HCIP---RSTP/MSTP

文章目录 目录 文章目录 前言 一.RSTP诞生背景 二.RSTP对比STP的快速收敛机制 端口角色变化 接口状态变化 RSTP-BPDU 指定端口- P/A机制 BPDU发送变化 端口状态快速切换 优化拓扑变更机制 三.MSTP MSTP诞生背景 MSTP相关概念 MSTP配置 总结 前言 STP协议虽然能够解决环…

Holynix

信息收集阶段 存活主机探测&#xff1a;arp-scan -l 当然了&#xff0c;正常来说我们不应该使用arp进行探测&#xff0c;arp探测的是arp的缓存表&#xff0c;我们应该利用nmap进行探测&#xff01; nmap -sT --min-rate 10000 192.168.182.0/24 端口探测 nmap -sT --min-rat…

java学习part42反射

187-反射机制-反射的理解与使用举例_哔哩哔哩_bilibili

代码随想录二刷 |二叉树 |94.二叉树的中序遍历

代码随想录二刷 &#xff5c;二叉树 &#xff5c;二叉树的中序遍历 题目描述解题思路代码实现迭代法递归法 题目描述 94.二叉树的中序遍历 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&a…

protobuf 协议 java版

protobuf全称Google Protocol Buffers 1. 下载proto文件编译软件 下载路径&#xff1a;https://github.com/protocolbuffers/protobuf/releases下载文件&#xff1a;protoc-25.1-win64.zip将 bin 目录配置到环境变量path 中2. pom引入protobuf-java <dependency><gro…

解决traefik/nginx-ingress-controller配置正确的情况访问域名仍然报错: Connection Refused的问题

最近碰到一个很奇怪的问题&#xff1a; traefik/nginx-ingress-controller配置正确&#xff0c;但是访问ingress配置的host域名就是死活报错&#xff1a; Connection Refused 这样怎么也找不到原因&#xff0c;然后一咬牙直接在其中一台节点yum安装nginx, 通过直接反向代理的方…

高效纯化树脂A-2313 CPR

在化工、制药等行业中&#xff0c;对colorful chemicals的纯化一直是挑战。本文将为您介绍一款具有卓越性能的强碱性阴离子交换树脂——Tulsion A-2313 CPR。通过分析其特性和应用&#xff0c;展示其在colorful chemicals纯化领域的优势。 一、Tulsion A-2313 CPR离子交换树脂的…

SQL命令---删除字段

介绍 使用sql语句删除表字段。 命令 alter table 表名 drop 字段名;例子 删除a表中的name字段。 alter table a drop name;下面是执行删除后的表结构&#xff1a;

Java智慧校园-中小学校园管理系统源码

智慧校园系统是通过信息化手段&#xff0c;实现对校园内各类资源的有效集成 整合和优化&#xff0c;实现资源的有效配置和充分利用&#xff0c;将校务管理过程的优化协调。为校园提供数字化教学、数字化学习、数字化科研和数字化管理。 致力于为家长和教师提供一个全方位、多层…

〖Python网络爬虫实战㊷〗- 极验滑块介绍(四)

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…

数据结构与算法之美学习笔记:34 | 字符串匹配基础(下):如何借助BM算法轻松理解KMP算法?

这里写自定义目录标题 前言KMP 算法基本原理失效函数计算方法KMP 算法复杂度分析解答开篇 & 内容小结 前言 本节课程思维导图&#xff1a; BM 算法&#xff0c;是工程中非常常用的一种高效字符串匹配算法。不过&#xff0c;在所有的字符串匹配算法里&#xff0c;要说最知名…