1.rect to path
如下图所示，一个rect是由 4 个弧和 4 个线段构成；如果rect没有设置 rx 和 ry 则rect只是由 4 个线段构成。rect转换为path只需要将 A ~ H 之间的弧和线段依次实现即可。
function rect2path(x, y, width, height, rx, ry) {
/*
* rx 和 ry 的规则是：
* 1. 如果其中一个设置为 0 则圆角不生效
* 2. 如果有一个没有设置则取值为另一个
*/
rx = rx || ry || 0;
ry = ry || rx || 0;
//非数值单位计算，如当宽度像100%则移除
if (isNaN(x - y + width - height + rx - ry)) return;
rx = rx > width / 2 ? width / 2 : rx;
ry = ry > height / 2 ? height / 2 : ry;
//如果其中一个设置为 0 则圆角不生效
if(0 == rx || 0 == ry){
// var path =
// 'M' + x + ' ' + y +
// 'H' + (x + width) + 不推荐用绝对路径，相对路径节省代码量
// 'V' + (y + height) +
// 'H' + x +
// 'z';
var path =
'M' + x + ' ' + y +
'h' + width +
'v' + height +
'h' + -width +
'z';
}else{
var path =
'M' + x + ' ' + (y+ry) +
'a' + rx + ' ' + ry + ' 0 0 1 ' + rx + ' ' + (-ry) +
'h' + (width - rx - rx) +
'a' + rx + ' ' + ry + ' 0 0 1 ' + rx + ' ' + ry +
'v' + (height - ry -ry) +
'a' + rx + ' ' + ry + ' 0 0 1 ' + (-rx) + ' ' + ry +
'h' + (rx + rx -width) +
'a' + rx + ' ' + ry + ' 0 0 1 ' + (-rx) + ' ' + (-ry) +
'z';
}
return path;
}
2.circle/ellipse to path
圆可视为是一种特殊的椭圆，即 rx 与 ry 相等的椭圆，所以可以放在一起讨论。 椭圆可以看成A点到C做180度顺时针画弧、C点到A做180度顺时针画弧即可。
function ellipse2path(cx, cy, rx, ry) {
//非数值单位计算，如当宽度像100%则移除
if (isNaN(cx - cy + rx - ry)) return;
var path =
'M' + (cx-rx) + ' ' + cy +
'a' + rx + ' ' + ry + ' 0 1 0 ' + 2*rx + ' 0' +
'a' + rx + ' ' + ry + ' 0 1 0 ' + (-2*rx) + ' 0' +
'z';
return path;
}
3.line to path
相对来说比较简单，如下：
function line2path(x1, y1, x2, y2) {
//非数值单位计算，如当宽度像100%则移除
if (isNaN(x1 - y1 + x2 - y2)) return;
x1 = x1 || 0;
y1 = y1 || 0;
x2 = x2 || 0;
y2 = y2 || 0;
var path = 'M' + x1 + ' '+ y1 + 'L' + x2 + ' ' + y2;
return path;
}
4.polyline/polygon to path
polyline折线、polygon多边形的转换为path比较类似，差别就是polygon多边形会闭合。
// polygon折线转换
points = [x1, y1, x2, y2, x3, y3 ...];
function polyline2path (points) {
var path = 'M' + points.slice(0,2).join(' ') +
'L' + points.slice(2).join(' ');
return path;
}
// polygon多边形转换
points = [x1, y1, x2, y2, x3, y3 ...];
function polygon2path (points) {
var path = 'M' + points.slice(0,2).join(' ') +
'L' + points.slice(2).join(' ') + 'z';
return path;
}
五、convertpath 转换工具
为了方便处理SVG基本元素路径转换，本人抽空写了convertpath工具，具体如下：
安装：
1npm i convertpath
使用：
const parse = require('convertpath');
parse.parse("./test/test.svg")
/**
*
*/
console.log(parse.toSimpleSvg())
/**
*
*/
来源：https://blog.csdn.net/phj_88/article/details/81008060