D3.jsとFabric.jsを使ってcanvasに描画する

最終更新日

d3.js Advent Calendar 2013 4日目の参加記事です。

以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。

Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。

最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一変します。

Fabricは、この問題の解決を目指しています。
(中略)
そのような低水準で仕事をする代わりに、Fabric は、簡単ですが、ネイティブメソッド上に強力なオブジェクトモデルを提供します。 Fabricは、canvasの状態とレンダリングの面倒を見てくれ、直接オブジェクトを扱う仕事をさせてくれます。

Fabric.js 公式
Fabric.js 日本語

この手のライブラリはそれこそ山のようにありますが、Fabricの特徴は内部にSVGパーサーを内蔵しておりsvgで描かれた図をcanvasに転写する機能にすぐれている点です。

[Fabric.js]SVGをcanvasに転写する

上記記事のようににFabricを使うことで、D3で作成したsvgも簡単にcanvsに転写することができます。

またFabricでは、SVGのpathエレメント同様にpathLengthコマンドを用いてcanvas上にパスを記述することができます。

出力結果
fabric10

svg要素と同じ指定方法でオブジェクトを生成することができるので、D3.svgメソッドから生成したpathLengthコマンドを直接Fabricに渡してcanvasに図を記述することができます。
下記は、簡単ですがd3.svgで生成したpathLengthコマンドをFabricに渡して記述した例です。

example

さらに面白いことにFabricでは、canvasに追加したオブジェクトはすべてインタラクティブに操作(拡大縮小や回転)が可能になります。

d3fabric

このように、Fabric.jsはD3.jsと非常に相性のよいグラフィックライブラリですので、興味ある方はD3と一緒に触ってみてはいかがでしょうか?

その他のD3.jsの記事はこちら