通过减少节点数来简化SVG路径字符串

Question

我正在生成一个代表折线图的大型SVG路径字符串。

在图表下方，我有一个用于选择时间范围切片的滑块。滑块后面是整个折线图的迷你预览。

我目前正在缩小生成预览的路径，但是这样做我每个像素最终会有数十个节点，因此需要更多细节。当然，这使得浏览器可以进行更多的渲染。

有很多关于压缩svg字符串（gzipping等）的信息，尽管通过减少节点实际上简化路径的算法很少。

我正在使用Raphaeljs并正在寻找基于javascript的解决方案。有什么想法吗？

Answer 1

Simplify.js可能是你正在照顾的。

鉴于您的折线图仅由直线段组成（根据定义它应该如此），您可以像这样使用它：

  var tolerance = 3
  var pathSegArray = []
  for (var i=0; i<path.pathSegList.numberOfItems; i++) {
    pathSegArray.push(path.pathSegList.getItem(i))
  }
  var newPathArray = simplify(pathSegArray,tolerance)
  var newD = "M";
  for (i=0; i<newPathArray.length; i++) {
    newD += newPathArray[i].x + " " + newPathArray[i].y + " "
  }
  path.setAttribute("d",newD)