2011-10-05 13 views
6

Raphaelで描かれたパスの終点のX/Y座標を取得する必要があります。後でSVGブラウザーでそのパスを調べる方法を見つけましたが、このアプローチはVMLブラウザーでは機能しません。Raphaelのパス終点のX/Y位置

例:クロムで

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/

は、円は、パスのイントロスペクションを介してエンドポイントで引き込まれます。 IE 6/7/8では、パスの定義が分解/正規化されないため、サークルは描画されません。

答えて

8

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

}

+0

シンプルでエレガントです。ありがとう! – bjaxbjax

関連する問題