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!
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