(4)SVG-path中的椭圆弧A(绝对)或a(相对)

1、概念

表示经过起始点(即上一条命令的结束点),到结束点之间画一段椭圆弧

2、7个参数

rx,ry,x-axis-rotation,large-arc-flag,sweep-flag,x,y

(1)和(2)rx,ry

rx:椭圆的x轴半径(即水平半径)

ry:椭圆的y轴半径(即垂直半径)

这两个参数好理解,就是椭圆的两条对称轴半径,相等即为圆

也可以写比例,写比例时默认用符合条件的最小值,此时参数4就没有意义了(会出现下图右侧的情况)

(3)x-axis-rotation

椭圆x轴相对于当前坐标系的旋转角度,以度数表示,顺时针为正

(4)large-arc-flag

大弧标志,0表示绘制小弧,1表示绘制大弧。弧线有两个不同的弧度(小于180度的弧和大于180度的弧),该标志用于指定使用哪种弧度,简单理解就是短弧和长弧

(5)sweep-flag

扫掠标志,0表示弧线从起点到终点沿逆时针方向绘制,1表示沿顺时针方向绘制

(6)x(7)y

终点的x坐标(x,y)

3、用法

参数之间用空格隔开,如:

css 复制代码
Arx ry x-axis-rotation large-arc-flag sweep-flag x y

例:M50 100 A50 100 0 1 0 150 100

表示:经过(50, 100)这点,画一段x轴为50,y轴为100,绕x轴顺时针方向旋转角度为0°,取长弧,沿逆时针画的一段椭圆弧

4、绘制流程

(1)先绘制椭圆

首先,抛开起点和终点,通过rx和ry,我们可以确定一个椭圆

(2)旋转角度

接着,我们确定其旋转角度x-axis-rotation,使其x轴顺时针旋转,假设为30°

(3)移动椭圆,使椭圆周边去适配到起点和终点坐标

接着,我们需要让它经过起点和终点,通过移动椭圆,使其能够经过起点和终点,可能的情况会有4种

如上,有两种情况

第一种,椭圆较大,可经过起点终点,此时可能的弧线有四条,如上图左侧

第二种,椭圆较小,无法经过起点终点,绘制时会等比放大,使其达到刚好能经过起点终点的状态,可能的弧线依旧会有四条,但有两条重叠(相同),如上图右侧

(4)根据参数4(large-arc-flag)和5(sweep-flag)确定唯一的一条弧

我们需要通过第4、5两个参数确定一条唯一的弧

  • 第4个参数确定选择长的还是短的
  • 第5个参数确定选择顺时针绘制还是逆时针绘制的(从起点到终点),在上图的体现为上下

最后,我们即可确定唯一的一条弧

  • M100 150 A55 100 30 1 1 200 150为可能弧1
  • M100 150 A55 100 30 0 1 200 150为可能弧2
  • M100 150 A55 100 30 0 0 200 150为可能弧3
  • M100 150 A55 100 30 1 0 200 150为可能弧4
相关推荐
hy____12325 分钟前
C语言:数据的存储
c语言·开发语言
prettyxian31 分钟前
【c++】vector的使用
开发语言·c++
GISer Liu1 小时前
深入理解Transformer中的解码器原理(Decoder)与掩码机制
开发语言·人工智能·python·深度学习·机器学习·llm·transformer
TANGLONG2221 小时前
【C++】类与对象初级应用篇:打造自定义日期类与日期计算器(2w5k字长文附源码)
java·c语言·开发语言·c++·python·面试·跳槽
martian6652 小时前
第23篇:Python开发进阶:详解测试驱动开发(TDD)
开发语言·驱动开发·python·tdd
xianwu5432 小时前
反向代理模块1
开发语言·网络·数据库·c++·mysql
夏子曦2 小时前
Python+OpenCV(1)---傅里叶变换
开发语言·python·opencv
不做超级小白2 小时前
深入理解 JavaScript 对象字面量:创建对象的简洁方法
开发语言·javascript·ecmascript
我曾经是个程序员2 小时前
C#集合排序的三种方法(List<T>.Sort、LINQ 的 OrderBy、IComparable<T> 接口)
开发语言·c#
半夏知半秋3 小时前
rust学习-rust中的格式化打印
服务器·开发语言·后端·学习·rust