Javascript SVG：反向三次和二次贝塞尔曲线

我正在编写一个SVG路径命令的脚本，到目前为止一切都很顺利，但没有使用

S

path命令或

T

在其中一个仅基于立方贝塞尔

C

曲线的for path reverse功能中，工作完美，但输出路径字符串相当大，有时是长度的两倍或三倍

下面是

reversePath.js

的简化版本，到目前为止，它实现了

s

的一些基本处理和一个测试页面：

//我正在编写的脚本适用于这些数组
变量路径=['M'，10,80]，'C'，40,10,65,10,95,80]，'S'，150150180,80]，'S'，230,10270,80]，
target=document.getElementById（'target'）；
//我们的重点就在这里
函数反向路径（路径输入）{
让isClosed=pathInput.slice（-1）[0][0]=“Z”，
params={x1:0，y1:0，x2:0，y2:0，x:0，y:0，qx:null，qy:null}，
pathCommand=''，pLen=0，
反向路径=[]；
reversedPath=pathInput.map（（seg，i，pathArray）=>{
pLen=pathArray.length
pathCommand=seg[0]
开关（路径命令）{
案例“M”：
x=seg[1]
y=seg[2]
打破
案例“Z”：
x=pathArray[0][1]
y=pathArray[0][2]
打破
违约：
x=分段[分段长度-2]
y=分段[分段长度-1]
}
返回{
c:pathCommand，
x:x，
y:y，
赛格：赛格
}
}).map（（seg，i，pathArray）=>{
设段=seg.seg，
prevSeg=i&&pathArray[i-1]，
nextSeg=pathArray[i+1]&&pathArray[i+1]，
结果=[]
pLen=pathArray.length
pathCommand=seg.c
params.x=i？路径阵列[i-1].x:pathArray[pLen-1].x
参数y=i？路径阵列[i-1]。y:pathArray[pLen-1]。y
开关（路径命令）{
案例“M”：
结果=isClosed？['Z']：[pathCommand，params.x，params.y]
打破
案例“C”：
如果（'S'==nextSeg.c）{
params.x2=params.x1+params.x2/2
params.y2=params.y1+params.y2/2
结果=['S'，params.x2，params.y2，params.x，params.y]
}否则{
参数x1=段[3]
参数y1=段[4]
params.x2=段[1]
params.y2=段[2]
结果=[pathCommand，params.x1，params.y1，params.x2，params.y2，params.x，params.y]；
}
打破
案例S：
params.x2=params.x1+params.x2/2
params.y2=params.y1+params.y2/2
if（nextSeg&&'S'==nextSeg.c）{
结果=[pathCommand，params.x2，params.y2，params.x，params.y]
}否则{
params.x1=params.x1+params.x2/2
params.y1=params.y1+params.y2/2
params.x2=段[1]；
params.y2=段[2]；
结果=['C'，params.x1，params.y1，params.x2，params.y2，params.x，params.y]；
}
打破
案例“Z”：
结果=['M'，params.x，params.y]
打破
违约：
结果=段.slice（0，-2）.concat（[params.x，params.y]）
}    
返回结果
})
return isClosed？reversedPath.reverse（）：[reversedPath[0]].concat（reversedPath.slice（1.reverse（））
}
函数pathToString（pathArray）{
返回pathArray.map（x=>x[0].concat（x.slice（1）.join（“”））.join（“”）
}
函数反向（）{
var reversed=pathToString（reversePath（路径））；
target.setAttribute（'d'，反向）
target.closest（'.col'）.innerHTML+='
'+reversed+'
'
}

。行{宽度：100%；显示：柔性；柔性方向：行}
.col{宽度：50%；文本对齐：中心}
.text left{text align:left}

反向

正常路径
反向路径（单击按钮）

好的，标准化成功了。还有一些新的添加和更强大的值处理功能，但让我们开始吧，这里有一些新添加的更新功能：

//我正在编写的脚本适用于这些数组
var pathCubic=['M'，10,80]，'C'，40,10,65,10,95,80]，'S'，150150180,80]，'S'，230,10270,80]，
targetCubic=document.getElementById（'target'）；
//更新后的函数
功能反向路径（绝对路径）{
var isClosed=absolutePath.slice（-1）[0][0]=='Z'，
反向路径=规格化路径（绝对路径）.map（函数（段，i）{
返回{
c:绝对路径[i][0]，
x:段[段长度-2]，
y:段[段长度-1]，
seg:absolutePath[i]，
标准化：段
}
}).map（函数（seg、i、pathArray）{
var段=seg.seg，
数据=分段标准化，
prevSeg=i&&pathArray[i-1]，
nextSeg=pathArray[i+1]&&pathArray[i+1]，
pathCommand=seg.c，
pLen=pathArray.length，
x=i？路径阵列[i-1]。x:pathArray[pLen-1]。x，
y=i？路径阵列[i-1]。y:pathArray[pLen-1]。y，
结果=[]；
开关（路径命令）{
案例“M”：
结果=isClosed？['Z']：[pathCommand，x，y]；
打破
案例“C”：
if（nextSeg&&nextSeg.c=='S'）{
结果=['S'，段[1]，段[2]，x，y]；
}否则{
结果=[pathCommand，段[3]，段[4]，段[1]，段[2]，x，y]；
}
打破
案例S：
如果（prevSeg&&'CS'.indexOf（prevSeg.c）>-1&&（！nextSeg | | nextSeg&&nextSeg.c！='S'））{
结果=['C'，数据[3]，数据[4]，数据[1]，数据[2]，x，y]；
}否则{
结果=[pathCommand，数据[1]，数据[2]，x，y]；
}
打破
案例“Z”：
结果=['M'，x，y]；
打破
}
返回结果
});
return isClosed？reversedPath.reverse（）：[reversedPath[0]].concat（reversedPath.slice（1.reverse（））
}
//新增
函数shorthandToCubic（x1、y1、x2、y2、prevCommand）{
返回'CS'。indexOf（prevCommand）>-1？{x1:x1*2-x2，y1:y1*2-y2}
：{x1:x1，y1:y1}
}
函数规格化分段（分段，