本文主要是介绍(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、用法
参数之间用空格隔开，如：
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
这篇关于(4)SVG-path中的椭圆弧A(绝对)或a(相对)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
