Search code examples
vectorsvgraphaelbeziercurve

How do I get sub-segments of vector curves with consistent length?


I am using the Raphael Javascript library to construct cubic bezier curves. I need to get a straight segment at the very end of my curve that is a consistent length regardless the length or structure of the larger curve. However when I place one point at the end of the curve and try to position the second 25 units back from the first, the actual distance between the points varies as I modify the curve. Is there a way to get a straight segment at the end of my curve that is always the same length in pixels? I am guessing this has to do with vector units being translated to actual pixels on the screen but I have found little in the way of specifics on how to remedy such inconsistencies. Thank you for any help you can provide!


Solution

  • If you are looking for length-along-the-path, you want to use getPointAtLength():

    var pt = myPath.getPointAtLength( myPath.getTotalLength() - 25 );
    

    This will give you an SVGPoint in the local space of the parent of the path.

    You can see an example using this method (and more) to sample regularly along a path here:
    http://phrogz.net/SVG/convert_path_to_polygon.xhtml