はじめてのRaphael (1) : お絵かき編
SVGが少しずつ市民権を獲得し始めている昨今のWWWですが、
Raphaelとは、そのSVGをコントロールするのに非常に便利なライブラリです。
公式によさげなチュートリアルがなかったのもあり、
今回はその使い方をまとめてみようという試み。
Raphaelとは
RaphaelはSVGで図を描画するためのフレームワークです。
正しくは「Raphaël」と書きますが、
毎度めんどくさいのでRaphaelでいきます。
なにをしてくれるのか
- SVGが動かないクラシックなIE環境の為に、VMLでも出力してくれます。
- イベントやアニメーションまわりも簡単に実装できるようになっています。
特に助かるのがVML対応。
旧ブラウザをサポートしなければならないケースには、
ぜひとも導入したいライブラリですね。
極めてシンプルな例
Rraphaelで図を描画する手順は、ざっくりとこんな感じ。
- まず紙（paper）を用意する
- その紙に図を描く。
矩形（rect）や円形（circle）等、基本となるシンプルな図形はステンシルが用意されています。
そうでない物は、フリーハンド（path）で描く事ができます。 - 描かれた図に、色や線種等のスタイルを設定します。
HTML
1 | <div id="my-paper-0"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 | (function(){ /** * [1] Raphael()でキャンバス（paper）をつくる */ var paper = Raphael( "my-paper-0", 64, 64 ); /** * [2] circle()で円を描画し、 * [3] attr()で属性を設定する */ paper.circle( 32, 32, 24 ) .attr( { fill : "#345", stroke : "none" } ); })(); |
Raphael() は、Paperというオブジェクトを返します。
図の描画は、そのPaperオブジェクトが持つメソッドを通して行う事になります。
基本図形を描いてみる
矩形（rect）、円形（circle）、楕円形（ellipse）等の基本図形は、
Paperのメソッドを使って簡単に描画する事ができます。
円形
1 2 3 4 | /** * Paper.circle( x, y, radius ); */ paper.circle( 32, 32, 24 ); |
矩形
1 2 3 4 5 | /** * Paper.rect( x, y, width, height, radius ); */ paper.rect( 8, 8, 48, 48 ); // 普通の矩形 paper.rect( 8, 8, 48, 48, 8 ); // 半径8の角丸矩形 |
楕円形
1 2 3 4 | /** * Paper.ellipse( x, y, horizontalRadius, virticalRadius ); */ paper.ellipse( 32, 32, 16, 24 ); |
Pathで自由に描いてみる
イラレ等の「ペンツール」のような感じで自由に図を描く事ができるのが、
Paper.path()メソッドです。
まずはシンプルな三角形で例を示してみましょう。
/** * Paper.path( pathString ); */ paper.path( "M32,8L56,56H8L32,8Z" );
path() の引数には、SVGで定義されているPath要素のコマンドを渡します。
文法は非常にシンプルで、アルファベット一文字で表されるコマンド毎に切り分けられます。
上記コードのコマンドを分解してみると…
- “M32,8″ : 32,8に移動する（MoveTo）
- “L56,56″ : 現在地から56,56まで線を描画する（LineTo）
- “H8″ : x座標8まで水平線を描画する（HorizontalLineTo）
- “L32,8″ : 32,8まで線を描画する（LineTo）
- “Z” : パスを閉じる
これらを一気に書いて表した感じですね。
コマンド（抜粋）
- M (MoveTo)
- 座標（x,y）に移動します
- L (LineTo)
- 座標（x,y）まで線を描画します
- H (HorizontalLineTo)
- 座標（x）まで水平線を描画します
- V（VirticalLineTo)
- 座標（y）まで垂直線を描画します
- C (CurveTo)
- 複数の座標をコントロールポイントとして引数に受け取り、ベジェ曲線を描画します。
コマンドを大文字で表記すると、座標を絶対位置として扱い、
小文字で表記すると現在地からの相対位置とします。
それぞれのコマンドについては公式ドキュメントか、SVGの仕様書を参考にしましょう。
もう少し複雑な例
三角形よりももうすこし複雑な例として、
Pathを使って矢印を描画してみます。
1 2 | paper.path( "M32,8L56,32L48,40L40,32V56H24V32L16,40L8,32L32,8Z" ) .attr( { fill : "#345", stroke : "none" } ); |
デモ
デモをこちらにまとめました。
ご参考までに。
まとめ
図形を描くのに色々メソッドやコマンドを覚えたりしなければいけませんが、
恐らくSVGを直に書く際にも役に立つ知識なので、無駄にはならないと思います。
さらに複雑なものを描かなければならない時は、
他の楽な方法がありますが、それはまた別の記事で。