The position of the endpoint X / Y in Raphael

Question

I need to get the X / Y coordinate of the end of the path drawn in Raphael. I found a way that works by exploring the path subsequently in SVG browsers, but this approach does not work in VML browsers.

Example:

var paper = Raphael('canvas', 200, 200); var p = paper.path(['M', 10, 10, 'l', 30, 30, 'a', 20, 30, 0, 1, 0, 40, 10, 'a', 20, 30, 0, 1, 0, 40, 10, 'l', -15, -18]); var lastP = p.attrs.path[p.attrs.path.length - 1]; paper.circle(lastP[lastP.length - 2], lastP[lastP.length - 1], 3); 

http://jsfiddle.net/sY4Up/1/

In Chrome, a circle is drawn at the endpoint through an introspection of the path. In IE 6/7/8, a circle is not drawn because the path definition does not decompose / normalize.

Answer 1

use getPointAtLength and getTotalLength to find the position.

 window.onload = function() { var paper = Raphael('canvas', 200, 200); var p = paper.path(['M', 10, 10, 'l', 30, 30, 'a', 20, 30, 0, 1, 0, 40, 10, 'a', 20, 30, 0, 1, 0, 40, 10, 'l', -15, -18]); var lastP = p.attrs.path[p.attrs.path.length - 1]; paper.circle(lastP[lastP.length - 2], lastP[lastP.length - 1], 3); var pt = p.getPointAtLength(p.getTotalLength()); paper.circle(pt.x,pt.y,10); 

};