首先
之前是查过相关资料的,但是后来修改需求时又涉及到路径,又得回头重查,可怕的是这个知识点的名字都记不起来了。所以还是静下来记录一下
//路径格式 ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z"); ret.join(" ");//替换“,”为“ ”;
相关命令的含义
M:移动
M 0 0 //设置起点
L:线到
L 100 100 //从当前点连线到100,100
H:水平线
>V:垂直线
>C:曲线
>S:平滑曲线
>
Q:二次贝塞尔曲线
>T:平滑二次贝塞尔曲线
>A:椭圆弧
A中含有7个参数,格式如下
A rx ry x-axis-rotation larrge-are-flag sweepflag x y
rx : x轴半径
ry : y轴半径
x-axis-rotation :绕x轴旋转,默认方向为顺时针,参数为角度,如 “ -45”,“45”
larrge-are-flag :选择大弧度(1)还是小弧度(0)
sweepflag : 顺时针(1)逆时针(0)
x y : 设置弧度结束点的坐标。但是需要注意: 弧度闭合时,不能和初始点一致,否则图形大小为0,可以通过偏移一点的坐标绘制闭合弧度。另外弧度精度最小为0.0001. 如: M 100 100 A 50 50 0 1 1 100 99.9999 (此处偏移了0.0001)Z:关闭路径
>:“0 0 0” :*
其他
path并不是只能保存一段路径,
ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z","M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z");//"z"是关闭路径,但是可以在面新接一段path。在一个path标签中变有了多个路径。