在javascript中将svg路径转换为多边形答案

【问题标题】：Converting svg path to polygon in javascript在javascript中将svg路径转换为多边形
【发布时间】：2013-04-12 13:40:46
【问题描述】：

我正在尝试将 svg 路径转换为 javascript 中的 svg 多边形。我发现这个函数可以沿着路径爬行并提取它的坐标。

    var length = path.getTotalLength();
    var p=path.getPointAtLength(0);
    var stp=p.x+","+p.y;

    for(var i=1; i<length; i++){

        p=path.getPointAtLength(i);
        stp=stp+" "+p.x+","+p.y;

    }

这可行，但它会为最初只有六个点的多边形返回数百个点。我怎样才能只得到必要的点（所有路径都是直线，没有曲线）

【问题讨论】：

我敢打赌，您需要确定自上次迭代以来 x 或 y 值之一何时发生变化，这意味着方向已经改变。只有这样你才能抓住这一点。
减少了点数，但仍然在 1000 点左右。我需要 6 个。
你能提供一个带有 SVG 和这段代码的 jsFiddle 吗？
当然.. 给你.. jsfiddle.net/AudEh

标签： javascript svg polygon

【解决方案1】：

好的，getPathSegAtLength() 函数返回实际路径段的编号。这样就很容易了。

    var len = path.getTotalLength();
    var p=path.getPointAtLength(0);
    var seg = path.getPathSegAtLength(0);
    var stp=p.x+","+p.y;

    for(var i=1; i<len; i++){

        p=path.getPointAtLength(i);

        if (path.getPathSegAtLength(i)>seg) {

        stp=stp+" "+p.x+","+p.y;
        seg = path.getPathSegAtLength(i);

        }

    }

【讨论】：

getPathSegAtLength 已被删除。请查看developer.mozilla.org/en-US/docs/Web/API/SVGPathElement

【解决方案2】：

path.getPointAtLength() 适用于不需要速度和质量的粗略用途。如果你得到每个像素，你会得到数千个点，但质量仍然很低，因为 SVG 路径可以有十进制值，例如。 0.1，0.2。

如果您想通过调用例如更精确。 path.getPointAtLength(0.1)你很容易在复杂的路径中获得数万个点，这个过程持续几秒或几十秒。之后，您必须减少点数 (https://stackoverflow.com/a/15976155/1691517)，这又会持续几秒钟。但是如果删除了错误的点，质量仍然会很低。

更好的技术是首先将所有路径段转换为三次曲线，例如。使用Raphael's path2curve() 然后使用一些自适应方法 (http://antigrain.com/research/adaptive_bezier/) 将立方线段转换为点，您可以同时获得速度和质量。之后就不需要减分了，因为自适应过程本身就有参数来调整质量。

我已经制作了一个可以完成所有这些功能的函数，当它对速度进行足够优化时，我将发布它。经过数千条随机路径的测试，质量和可靠性似乎是 100%，而且速度明显快于path.getPointAtLength()。

【讨论】：

感谢您的努力，但就我而言，正如我所说，我只使用直线，所以这不是必需的
@Timo - 你发布过你的算法吗？

【解决方案3】：

要遍历段，请使用以下内容：

var segList = path.normalizedPathSegList; // or .pathSegList

for(var i=1; i<segList.numberOfSegments; i++){
    var seg = segList.getItem(i);
}

如果你想减少顶点的数量，那么你可以使用Simplify.js作为described here。

【讨论】：