SVG-椭圆弧-参数转换-计算公式-标准解读

1.简介

为了与其他路径段表示法保持一致， SVG 路径中的圆弧是根据曲线上的起点和终点定义的。椭圆弧的这种端点参数化。优点是它允许与其它路径一致的语法，其中所有路径命令都以新“当前点”的坐标。然而，这并不是描述弧几何形状的唯一方法。 本节介绍替代中心参数化， 以及如何将其与 SVG 的端点参数化进行转换。

2.基本参数

x1,y1 表示起点路径
rx,ry 表示椭圆水平和垂直方向的半长轴
φ 表示当前x轴顺时针旋转到椭圆x轴的角度
–x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
fA 是大弧形标志，为 0 如果选择跨度小于或等于180 度的弧，则为 1 如果选择跨度大于 180 度的圆弧。
–large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
fS 是扫描标志，如果值为0，连接中心到弧线的线扫过递减角度，如果值为1，则增加角度。
–sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
(x2, y2) 是 弧线的终点

2.1.椭圆的表达

(cx, cy) 表示椭圆的中心点坐标。θ 表示椭圆扫描角度（仰角），一般表示x正轴逆时针旋转角，φ同上，rx和ry为半长轴。Δθ表示弧长的角度变换，从起始角逆时针旋转到结束角。

2.2.参数变换

cx cy rx ry φ θ1 Δθ 变换到 x1 y1 x2 y2 fA fS

x1 y1 x2 y2 fA fS rx ry φ 变换到 cx cy θ1 Δθ

2.3.注意事项

第 1 步：确保半径不为零。
如果半径为0，则表示起点到终点的直线。
第 2 步：确保半径为正。
rx，ry取绝对值。
第 3 步：确保半径值足够大，否则按一定比率放大到能够连接上。

3.参考资料

W3C官方标准文档。
SVG参数解析标准教程。

4.总结

SVG坐标系是三维坐标系中的左手坐标，能够更好的满足视图绘制要求，左手和右手坐标系，在二维空间中，最大的不同在于右手坐标系，逆时针为正，左手坐标系顺时针为正，其它没有发现区别。在处理角度时需要特别注意。