raphael - Raphael 中路径端点的 X/Y 位置

Question

我需要检索在 Raphael 中绘制的路径末端的 X/Y 坐标。我找到了一种通过在 SVG 浏览器中自省(introspection)路径的方法，但这种方法在 VML 浏览器中不起作用。

例子:

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/

在 Chrome 中，通过路径自省(introspection)在端点绘制一个圆圈。在 IE 6/7/8 中，圆圈不会绘制，因为路径定义没有得到分解/规范化。

Answer 1

使用 getPointAtLength 和 getTotalLength 来查找位置。

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);

};