RAPHAELIST

Raphael.jsは日本語ドキュメントが少ないので、初心者には敷居が高いのを何とかするブログ

【Raphael.js】SVGで円弧を描く関数を作ってみた。

SVGで円の弧を描く

今日のテーマは円弧の描画です。Raphael.jsではそれは可能ですが、SVGの規約に則ったパス文字列を指定しなければ正しい円弧を描く事はできません。パス文字列…あのややこしいやつです。Raphael標準の描画メソッドにあってもよさそうなものですが、今のところ存在しないようです。という事でつくってみました。パイプ状?のグラフなどに使ってみてください。中心座標、半径、角度を与えると、パス文字列を返してくれます。

 

実行結果

FullScreen http://jsfiddle.net/nekosmash/eUTFw/embedded/result/

 

解説

あとは、作った関数をtransformで回転させたりすれば、どのような弧でも描けます。このパスはSVG共通の書式になっているので、Raphael.jsに限らず使用できると思います。 ファンキーグラマラスな円弧を作っちゃってください。

getArc(cx,cy,r,rad);

  • Element: データを記憶させるRaphaelエレメント
  • cx: 中心点のY座標
  • cy: 中心点のX座標
  • r: 半径
  • rad: 弧の角度
  • 返り値: 円弧のパス文字列