通过减少节点数来简化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)