Javascript 将svg路径d拆分为对象数组

有没有办法将

d

路径字符串拆分为一个对象数组

例如：

const d=`M 0 L 0 10 C 0 10 20 20 Z`
常量结果=从路径到阵列（d）
//常数结果=[
//{type:'M'，x:0，y:0}，
//{type:'L'，x:0，y:10}，
//{类型：'C'，x1:0，y1:10，x2:20，y2:30，x3:20，y3:20}，
//{type:'Z'}，
// ]

这里是我的起始代码：

const PATH_命令={
M:[“x”，“y”]，
m:[“dx”，“dy”]，
H:[“x”]，
h:[“dx”]，
V:[“y”]，
v:[“dy”]，
L:[“x”，“y”]，
l:[“dx”，“dy”]，
Z:[]，
C:[“x1”、“y1”、“x2”、“y2”、“x”、“y”]，
c:[“dx1”、“dy1”、“dx2”、“dy2”、“dx”、“dy”]，
S:[“x2”、“y2”、“x”、“y”]，
s:[“dx2”、“dy2”、“dx”、“dy”]，
Q:[“x1”、“y1”、“x”、“y”]，
q:[“dx1”、“dy1”、“dx”、“dy”]，
T:[“x”，“y”]，
t:[“dx”，“dy”]，
A:[“rx”、“ry”、“旋转”、“大弧”、“扫掠”、“x”、“y”]，
答：[“rx”、“ry”、“旋转”、“大弧”、“扫掠”、“dx”、“dy”]
};
导出函数拆分路径（路径）{
const items=path.trim（）.split（/\s*，|\s+/）；
常量段=[]；
items.forEach（（item，i）=>{
常量类型=isString（项）？项：空
// ...
})
返回段
}

下面是一个简单的例程，适用于您描述的案例。请注意，只有当您知道输入遵循某种模式时，这种简单的解决方案才有用。如评论所示，一般情况更为复杂。此外，还应添加健全性检查以处理错误输入

const PATH_命令={
M:[“x”，“y”]，
m:[“dx”，“dy”]，
H:[“x”]，
h:[“dx”]，
V:[“y”]，
v:[“dy”]，
L:[“x”，“y”]，
l:[“dx”，“dy”]，
Z:[]，
C:[“x1”、“y1”、“x2”、“y2”、“x”、“y”]，
c:[“dx1”、“dy1”、“dx2”、“dy2”、“dx”、“dy”]，
S:[“x2”、“y2”、“x”、“y”]，
s:[“dx2”、“dy2”、“dx”、“dy”]，
Q:[“x1”、“y1”、“x”、“y”]，
q:[“dx1”、“dy1”、“dx”、“dy”]，
T:[“x”，“y”]，
t:[“dx”，“dy”]，
A:[“rx”、“ry”、“旋转”、“大弧”、“扫掠”、“x”、“y”]，
答：[“rx”、“ry”、“旋转”、“大弧”、“扫掠”、“dx”、“dy”]
};
函数fromPathToArray（路径）{
const items=path.replace（/[\n\r]/g''）。
替换（/-/g，'-'）。
替换（/（\d*\）（\d+（=\）/g，$1$2'）。
修剪（）。
拆分（/\s*，|\s+/）；
常量段=[]；
让currentCommand=''；
让currentElement={}；
而（items.length>0）{
让它=items.shift（）；
if（PATH_COMMANDS.hasOwnProperty（it））{
currentCommand=it；
}
否则{
项目。取消移动（it）；
}
currentElement={type:currentCommand}；
PATH_命令[currentCommand].forEach（（prop）=>{
it=items.shift（）；//TODO健全性检查
currentElement[prop]=它；
});
如果（currentCommand=='M'）{
currentCommand='L'；
}
else if（currentCommand=='m'）{
currentCommand='l'；
}
分段。推送（currentElement）；
}
返回段
}
常数d=`M01010L010C0010
20 30 20 a 4.12.12 1 0 1 4.13-1 Z`；
常数结果=从路径到阵列（d）；
控制台日志（结果）这是一个简单的例程，适用于您描述的案例。请注意，只有当您知道输入遵循某种模式时，这种简单的解决方案才有用。如评论所示，一般情况更为复杂。此外，还应添加健全性检查以处理错误输入


const PATH_命令={
M:[“x”，“y”]，
m:[“dx”，“dy”]，
H:[“x”]，
h:[“dx”]，
V:[“y”]，
v:[“dy”]，
L:[“x”，“y”]，
l:[“dx”，“dy”]，
Z:[]，
C:[“x1”、“y1”、“x2”、“y2”、“x”、“y”]，
c:[“dx1”、“dy1”、“dx2”、“dy2”、“dx”、“dy”]，
S:[“x2”、“y2”、“x”、“y”]，
s:[“dx2”、“dy2”、“dx”、“dy”]，
Q:[“x1”、“y1”、“x”、“y”]，
q:[“dx1”、“dy1”、“dx”、“dy”]，
T:[“x”，“y”]，
t:[“dx”，“dy”]，
A:[“rx”、“ry”、“旋转”、“大弧”、“扫掠”、“x”、“y”]，
答：[“rx”、“ry”、“旋转”、“大弧”、“扫掠”、“dx”、“dy”]
};
函数fromPathToArray（路径）{
const items=path.replace（/[\n\r]/g''）。
替换（/-/g，'-'）。
替换（/（\d*\）（\d+（=\）/g，$1$2'）。
修剪（）。
拆分（/\s*，|\s+/）；
常量段=[]；
让currentCommand=''；
让currentElement={}；
而（items.length>0）{
让它=items.shift（）；
if（PATH_COMMANDS.hasOwnProperty（it））{
currentCommand=it；
}
否则{
项目。取消移动（it）；
}
currentElement={type:currentCommand}；
PATH_命令[currentCommand].forEach（（prop）=>{
it=items.shift（）；//TODO健全性检查
currentElement[prop]=它；
});
如果（currentCommand=='M'）{
currentCommand='L'；
}
else if（currentCommand=='m'）{
currentCommand='l'；
}
分段。推送（currentElement）；
}
返回段
}
常数d=`M01010L010C0010
20 30 20 a 4.12.12 1 0 1 4.13-1 Z`；
常数结果=从路径到阵列（d）；
控制台日志（结果）除了“a 4.12.12 001 4.13-1”是具有7个参数的完全有效的arc命令，因为001计为3个参数。您必须知道这些标志参数中的每一个都是1个字符。同样，您还必须知道4.12.12实际上被解析为4.12、0.12和4.12-1是4.12，-1您可以尝试以下几种方法@RobertLongson
a 4.12.12 001 4.13-1
不是有效的arc命令<代码>001
将被读取为旋转=1。你指的是
a4.12.12014.13-1
。啊，是的。接近但没有雪茄。您还可以重复所有参数，并将其计为该类型的附加命令（M，M变为L，L除外）。Fabric JS已经实现了类似的功能，将其作为一个字符串，返回一个Fabric对象，这将它们拆分为数组，如果需要的话，可以将其转换为点。我认为您可以在这里找到相关代码：（警告：这是一个沉重的页面，因为它指向一个巨大的源文件），除了“a 4.12.12 001 4.13-1”是一个具有7个参数的完全有效的arc命令之外