文章目录
- 1.简介
- 2.基本参数
- 2.1.椭圆的表达
- 2.2.参数变换
- 2.3.注意事项
- 3.参考资料
- 4.总结
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坐标系是三维坐标系中的左手坐标,能够更好的满足视图绘制要求,左手和右手坐标系,在二维空间中,最大的不同在于右手坐标系,逆时针为正,左手坐标系顺时针为正,其它没有发现区别。在处理角度时需要特别注意。