简化SVG路径字符串，减少节点数

Question

我正在生成一个大的SVG路径字符串，表示一个线条图表。

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

我目前正在缩小路径以生成预览，但这样做会导致每像素拥有数十个节点，因此比必要的细节更多。当然，这会给浏览器带来比它本该承受的更多的渲染负担。

关于压缩svg字符串（gzip等）有很多信息，但几乎没有关于通过减少节点来简化路径的算法。

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

- hacklikecrack

---

你有“d”属性的示例吗？例如：<path d="M150 0 L75 200 L225 200 Z" /> - lostsource

你已经通过显示大图加载了完整的“分辨率”路径，再次在缩略图中显示它所带来的性能损失应该是最小的，远不及使用算法简化路径。 - methodofaction

@Duopixel：我完全不认为那是真的。你会在DOM中看到相同的路径出现两次。如果浏览器能够针对此进行优化，我会非常惊讶。另外，据我所知，迷你预览的长宽比可能与完整路径不同 - 还有描边宽度可能也不同（相对于完整尺寸图表稍微加粗会更合理）。 - Thomas W

对我来说速度很快：http://jsfiddle.net/Zs28j/ - methodofaction

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)

- Thomas W

---

@cuixiping 这个问题是关于折线图的 - 所以是的，这只适用于折线。 - Thomas W