通过减少节点数来简化SVG路径字符串 [英] Simplifying SVG path strings by reducing number of nodes

问题描述

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

I am generating a large SVG path string that represents a line chart.

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

Beneath the chart I have a slider for selecting a time range slice. Behind the slider is a mini preview of the whole line chart.

我正在缩小生成预览的路径但是这样做我最终得到了几十个每个像素的节点因此需要更多的细节。当然这会让浏览器做更多渲染。

I am currently scaling down the path to generate the preview however in doing so I am ending up with tens of nodes per pixel and therefore far more detail then is necessary. Of course this gives the browser more rendering to do than it has to.

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

There is plenty of info available on compressing svg strings (gzipping etc), though little on algorithms that actually simplify the path by reducing the nodes.

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

I am using Raphaeljs and am looking for a javascript based solution. Any ideas?

推荐答案

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

Simplify.js is probably what you're looking after.

鉴于你的折线图只包含直线段（根据定义它应该），你可以像这样使用它：

Given your line chart consists of straight line segments only (which by definition it should), you can use it like this:

  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)

这篇关于通过减少节点数来简化SVG路径字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！