Question

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

    }

这可以工作，但它为最初只有六个点的多边形返回了几百个点。我怎么才能获得必要的点（所有路径都是直线，没有曲线）

Answer 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);

        }

    }

Answer 2

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

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

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

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

Answer 3

要迭代细分，请使用以下内容：

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

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

如果您想减少顶点数量，则可以将Simplify.js用作described here。

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

3 个答案: