2

我正在尝试将 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;

    }

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

4

3 回答 3

5

好的。。函数 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);

        }

    }
于 2013-04-12T16:03:32.130 回答
1

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

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

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

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

于 2013-04-25T08:11:29.797 回答
0

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

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

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

如果你想减少顶点的数量，那么你可以使用这里描述的Simplify.js。

于 2013-04-12T16:12:17.817 回答