X/Y position of path endpoint in Raphael
I need to retrieve the X/Y coordinate of the end of a path drawn in Raphael. I've found a way that works by introspecting the path afterwards 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[la开发者_C百科stP.length - 1], 3);
http://jsfiddle.net/sY4Up/1/
In Chrome, a circle gets drawn at the endpoint through path introspection. In IE 6/7/8, the circle does not draw because the path definition does not get decomposed/normalized.
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);
};
精彩评论