2012-04-28 15 views
4

私はパーセンテージに基づいて配置された2つの円の間のパスを描画しようとしています。 彼らがこのように位置づけられる理由は、用紙を拡大してその位置を維持したいということです。Raphael JSの2つのパーセンテージポイントの間に線を描く

これは円でうまく動作しますが、私はこのようなパスを描くしようとすると:

paper.path("M55% 70%L25% 20%") 

を私が得るすべては次のとおりです。

Error: Problem parsing d="M,0,0" 

私はこのことについてだどうすればよいですか?

また、手動で計算せずに要素のパーセンテージの位置を取得する方法はありますか?

ありがとうございます!

更新:

私は私の問題を解決することになったが、かなりマニュアル、workaroundy方法で:回答

var canvasX = $('#worldmap svg').width()/100; 
var canvasY = $('#worldmap svg').height()/100; 
mapCanvas.path("M" + Math.floor(parseFloat(from.attr("cx")) * canvasX) + " " 
     + Math.floor(parseFloat(from.attr("cy")) * canvasY) + "L" 
     + Math.floor(parseFloat(to.attr("cx")) * canvasX) + " " 
     + Math.floor(parseFloat(to.attr("cy")) * canvasY)); 

言うまでもなく、これは素晴らしいではありません。

+0

どのようにサークルをより正確に描いていますか? – mihai

+0

paper.circle('50% '、'50%'、20); – Joel

答えて

1

SVG PathData specificationには、この種の構文が許可されている旨の記載はありません。実際、私はそれが円の中心のようなものに許されていることに少し驚いています...しかし、私はあなたが正しいと思います。
スケールを実行すると、このjsfiddleで確認できるように、位置は固定されません。http://jsfiddle.net/PUg8r/

関連する問題