Положение X / Y конечной точки пути в Рафаэле - PullRequest
Новая
       0

Положение X / Y конечной точки пути в Рафаэле

6 голосов
/ 05 октября 2011

Мне нужно получить координату X / Y конца пути, нарисованного в Рафаэле.Я нашел способ, который работает путем внутреннего анализа пути в браузерах SVG, но этот подход не работает в браузерах 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 круг рисуется в конечной точке путем самоанализа пути.В IE 6/7/8 круг не рисуется, поскольку определение пути не разлагается / не нормализуется.

1 Ответ

9 голосов
/ 11 октября 2011

используйте 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);

};

...