6

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

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

我目前正在缩小生成预览的路径，但是这样做我最终每个像素有数十个节点，因此需要更多细节。当然，这给浏览器提供了比它必须做的更多的渲染工作。

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

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

4

1 回答 1

12

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)
于 2012-12-06T06:32:04.787 回答