Blog
canvasベースのベクターグラフィクス描画用jsライブラリとして、既に各所で紹介されているpaper.jsですが、これを、ウェブに載せるグラフの描画に使ってみましょう、というお話です。
paper.jsではパスをつくって描画をしつつ、パスに対するhit testも可能ですし、アニメーションも実装することができます。プロジェクトサイトではオシャレなサンプルが多数掲載されていて、paper.jsで何ができそうなのかを簡単にざっくりと知ることが出来ます。
javascriptでインタラクティブなグラフを、というとGoogle Chart Toolsなど、既存のグラフ用ライブラリを使って簡単に済ませることもできますが、ひと手間加えて独自性のある表現を出したい場合は、paper.jsのようなライブラリを使ってみると良いかと思います。
試しにpaper.jsの学習がてら、下記リンク先にあるような棒グラフを実装してみました。
bar graph – jsdo.it – share JavaScript, HTML5 and CSS
paper.jsの基本的な書き方ですが、下記のように、typeをtext/paperscriptとしたscriptタグを用意し、対象となるcanvasのidを指定してやります。
すると指定したcanvasがpaper.js用にセットアップされ、そのscriptタグ内で閉じたスコープができ、後は中でパスを作成すればcanvasに反映されます。
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'black';
var start = new Point(100, 100);
// Move to start and draw a line from there
path.moveTo(start);
// Note the plus operator on Point objects.
// PaperScript does that for us, and much more!
path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
text/paperscriptとしてではなく、text/javascriptとして書く事も勿論出来ます。その場合は上記セットアップ等を自分で書く必要が有ります。そのような書き方や、各種パスの作り方、マウスイベントの扱い方、アニメーションの作成方法など、本家サイトにtutorialやreferenceが一通り用意されていますので、興味の有る方はご覧になってみてはいかかでしょうか。
Tag
