在JavaScript中将SVG路径转换为多边形

Question

i am trying to convert an svg path to an svg polygon in javascript. i found this function to crawl along the path and extract its coordinates.

    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;

    }

this works but it returns some hundreds of points for a polygon that has only six points originally. how would i get only the necessary points (all paths are straight lines, no curves)

Answer 1

ok got it.. the function getPathSegAtLength() returns the number of the actual path segment. with that it's easy then.

    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() is good for rough purposes where you don't need both speed and quality. If you get every pixel, you get thousands of points, but still the quality is low, because SVG path can have decimal values, eg. 0.1, 0.2.

If you want more precision by calling eg. path.getPointAtLength(0.1) you get easily tens of thousands of points in complex paths and the process last seconds or tens of seconds. And after that you have to reduce the count of point ( https://stackoverflow.com/a/15976155/1691517 ), which last again seconds. But still the quality can be low, if wrong points are removed.

Better techique is to first convert all path segments to cubic curves eg. using Raphael's path2curve() and then use some adaptive method ( http://antigrain.com/research/adaptive_bezier/ ) to convert cubic segments to points and you get at the same time both the speed and quality. And after that there is no need to reduce points because the adaptive process itself has parameters to adjust the quality.

I have made a function that does all that and I'm going to publish it when it is enough optimized for speed. The quality and reliability seems to be 100% after testing with thousands of random paths and the speed is yet significantly faster than with path.getPointAtLength() .

Answer 3

To iterate over the segments, use something like this:

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

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

If you want to reduce the number of vertices, then you can use Simplify.js as described here .