Javascript SVG路径优化

我们的项目中有另一个团队制作的JSON文件，它帮助创建了带有绑定的动态SVG。JSON文件的问题在于它包含重复的未优化路径

我决定制作一个NodeJS脚本，扫描文件中包含的路径并对其进行优化

未优化路径的示例：

"paths": [ "M59245.1734326687,2320.0L59266.994415716,2320.0L59266.994415716,2320.0L59306.410931336,2320.0L59306.410931336,2320.0L59345.827446956,2320.0L59345.827446956,2320.0L59385.243962576,2320.0L59385.243962576,2320.0L59424.660478196,2320.0L59424.660478196,2320.0L59464.076993816,2320.0L59464.076993816,2320.0L59503.493509436,2320.0L59503.493509436,2320.0L59542.910025056,2320.0L59542.910025056,2320.0L59582.326540676,2320.0L59582.326540676,2320.0L59621.743056296,2320.0L59621.743056296,2320.0L59633.0477129758,2320.0L59633.0477129758,2320.0L59661.159571916,2320.0L59661.159571916,2320.0L59700.576087536,2320.0L59700.576087536,2320.0L59739.992603156,2320.0L59739.992603156,2320.0L59779.409118776,2320.0L59779.409118776,2320.0L59818.825634396,2320.0L59818.825634396,2320.0L59858.242150016,2320.0L59858.242150016,2320.0L59897.658665636,2320.0L59897.658665636,2320.0L59937.075181256,2320.0L59937.075181256,2320.0L59976.491696876,2320.0L59976.491696876,2320.0L60015.908212496,2320.0L60015.908212496,2320.0L60030.5396230941,2320.0L60030.5396230941,2320.0L60055.324728116,2320.0L60055.324728116,2320.0L60094.741243736,2320.0L60094.741243736,2320.0L60134.157759356,2320.0L60134.157759356,2320.0L60173.574274976,2320.0L60173.574274976,2320.0L60212.990790596,2320.0L60212.990790596,2320.0L60252.407306216,2320.0L60252.407306216,2320.0L60291.823821836,2320.0L60291.823821836,2320.0L60331.240337456,2320.0L60331.240337456,2320.0L60370.656853076,2320.0L60370.656853076,2320.0L60410.073368696,2320.0L60410.073368696,2320.0L60428.0157666062,2320.0M60428.0,2320.0L60428.0044472058,2319.99990189987L60428.0044472058,2319.99990189987" ]

没有重复项的路径（长度的一半！）：

在分析结果之后，我得出了一个结论，我可以简化路径以减少无用线。因此，我决定使用

npm

package

simplifypath

对每个路径进行简化。它工作得很好：

Not simplified:
[ [ [ 59245.1734326687, 2320 ] ], [ [ 59266.994415716, 2320 ], [ 59306.410931336, 2320 ], [ 59345.827446956, 2320 ], [ 59385.243962576, 2320 ], [ 59424.660478196, 2320 ], [ 59464.076993816, 2320 ], [ 59503.493509436, 2320 ], [ 59542.910025056, 2320 ], [ 59582.326540676, 2320 ], [ 59621.743056296, 2320 ], [ 59633.0477129758, 2320 ], [ 59661.159571916, 2320 ], [ 59700.576087536, 2320 ], [ 59739.992603156, 2320 ], [ 59779.409118776, 2320 ], [ 59818.825634396, 2320 ], [ 59858.242150016, 2320 ], [ 59897.658665636, 2320 ], [ 59937.075181256, 2320 ], [ 59976.491696876, 2320 ], [ 60015.908212496, 2320 ], [ 60030.5396230941, 2320 ], [ 60055.324728116, 2320 ], [ 60094.741243736, 2320 ], [ 60134.157759356, 2320 ], [ 60173.574274976, 2320 ], [ 60212.990790596, 2320 ], [ 60252.407306216, 2320 ], [ 60291.823821836, 2320 ], [ 60331.240337456, 2320 ], [ 60370.656853076, 2320 ], [ 60410.073368696, 2320 ], [ 60428.0157666062, 2320 ] ], [ [ 60428, 2320 ] ], [ [ 60428.0044472058, 2319.99990189987 ] ] ]

Simplified: 
[ 59245.1734326687, 2320, 60428.0044472058, 2319.99990189987 ]

如何将简化的点阵列转换回SVG路径？这有什么API吗

我从简化SVG路径的代码中删除了一部分（除了正则表达式，代码不是我写的！）：

//将SVG路径解析为数组。
var命令=路径数组[i]。路径[j]。拆分（/（？=[LMC]）/）；
//将路径阵列拆分为点阵列。
var pointArrays=commands.map（函数（d）{
var pointsArray=d.slice（1，d.length）.split（/[\s，-]+/）；
如果（点数组[0]=''）
pointsArray.shift（）；
var Pairsaray=[]；
对于（变量i=0；i//==>我想将点数组转换为SVG路径以下操作应完成：

path = 'M' + simplifyArray.join(',');

是的，如果你真的没有对曲线等做任何事情，那么你只是描述了一个多边形。这也许可以解释为什么我在底部的非简化示例中看不到任何命令？在这种情况下，您的任务变得非常简单，因为您不需要加入命令，只需读取要点

如果是这样的话，你可以做一些非常简单的事情，比如我组装的这个快速PoC。希望它能有所帮助，或者可能会更详细，我们将采取另一种尝试。我对这个挑战很感兴趣。：）


var几何体=[
[
'109,141',
'59.073,97.825',
'9.146,54.65',
'71.5,33',
'133.854,11.35',
'121.427,76.175'
],
[
'133.989,130.188',
'86.736,114.757',
'47.501,145.276',
'47.272,95.175',
'6.275,66.815',
'53.385,51.282',
'67.284,3.237',
'96.629,43.738',
'146.216,42.404',
'117.242,82.968'
],
[
'8,80',
'58,144',
'143,49',
'127,6',
'60,112',
'35,63'
]
], 
translate=0，
create=function（）{
对于（i=0，r=geometry.length；这是一个困难的问题。仅仅因为你有“简化”的点，就很难神奇地猜出它们是如何通过公共点使用的。换句话说，你看到的作为数据一部分的东西，以字母“M”、“L”、“Z”开头等等…决定了它们应该如何使用。仅仅有点不足以创建预期的图像。对不起，朋友。SVG由«M»和«L»组成，所以我想用类似于M[0]、L[0]、L[1]、L[N]的东西重新创建路径……是的，我的意思是，如果它们都是可以预测的模式，只需植入一个“M”在起点，“Z”在终点，“L”在这两者之间的任何东西上，这都是可以做到的。但是，这假设在基本模式之外没有曲线、水平线和其他点。如果是这样的话，我们可以写一些东西来消耗数组。是的，没有曲线。我明天会尝试一些东西！太好了，我会尝试一下！
// Parse SVG Path to array.
var commands = pathArrays[i].paths[j].split(/(?=[LMC])/);

// Split the Path array into a Points array.
var pointArrays = commands.map(function(d){
    var pointsArray = d.slice(1, d.length).split(/[\s,-]+/);

    if (pointsArray[0] == '')
        pointsArray.shift();                

    var pairsArray = [];
    for(var i = 0; i < pointsArray.length; i += 2){
        pairsArray.push([+pointsArray[i], +pointsArray[i+1]]);
    }
    return pairsArray;
});

// Call simplify method from npm package.
var simplifyArray = simplify(pointArrays, 10);

// ==> I want to convert array of points to SVG Path <==

path = 'M' + simplifyArray.join(',');