HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」
こ んにちは、渡辺です。
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」を紹介します。
Canvas上に描いた絵をマウス操作で動かしたり、拡大縮小する機能が標準で付いていてスゴい便利なライブラリです！
まず、このライブラリの主な特徴についてです。
■特徴
・インタラクティブ性
Canvas上に描いたものをマウスやタッチで自由に操作できます（ドラッグ、拡大縮小、回転）。
・Canvasに描いた内容をオブジェクトとして扱える
Canvasに描いたものをgetメソッドやsetメソッド経由で設定変更できます。
・Canvasのシリアライゼーション・デシリアライゼーションのサポート
Canvas上の内容をJSONまたはSVGに変換でき、再度インタラクティブな描画内容を復元することができます。
■準備
1. ライブラリのダウンロード
https://github.com/kangax/fabric.js 先の画面右下「Download ZIP」をクリックして、ライブラリをダウンロード。「dist」フォルダに入っている「fabric.js」または「fabric.min.js」を利用します。
2. Canvas要素とfabric.jsを関連づける
Canvas要素のid属性で関連づけます。ここでは"canvas"というidにしました。
Canvas上にカーソルを乗せた際に、カーソルが「＋」に変われば準備完了です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<!-- fabric.jsの読込み -->
<script type="text/javascript" src="./libs/fabric.js"></script>
</head>
<body>
<!-- canvas要素を用意 -->
<canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas>
<script type="text/javascript">
<!-- Canvasオブジェクトを作成 -->
var canvas = new fabric.Canvas('canvas');
<!-- ここにコードを書いていきます。 -->
</script>
</body>
</html>
■手書きの線を描く
準備が完了したので、Canvas上に手書きの線を描けるようにします。
手書き機能を実現するには、下の一行だけです。
デモ： http://jsfiddle.net/9uxvfgng/
canvas.isDrawingMode = true;
■円を描く
次は図形を描いていきます。
図形のオブジェクトを作って、canvasに追加し ます。
デモ： http://jsfiddle.net/9uxvfgng/1
var circle = new fabric.Circle({
left: 50,
top: 50,
fill: 'blue',
radius: 40
});
canvas.add(circle);
■四角形を描く
円を作成したのと同じ要領で作れます。
デモ： http://jsfiddle.net/9uxvfgng/2
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'yellow',
width: 50,
height: 50
});
canvas.add(rect);
■楕円形を描く
デモ： http://jsfiddle.net/9uxvfgng/3
var ellipse = new fabric.Ellipse({
left: 150,
top: 150,
fill: 'green',
rx: 50,
ry: 30
});
canvas.add(ellipse);
今回紹介したものも含めて、ライブラリでは基本図形(全7種類)が用意されています。
・fabric.Circle
・fabric.Ellipse
・fabric.Line
・fabric.Polygon
・fabric.Polyline
・fabric.Rect
・fabric.Triangle
■描画したものを選択可能にする
最初に行った「DrawingMode」の設定をオフにすることで、描いた絵が選択できるようになります。
ここでは手書きモードをON/OFFする簡易ボタンを作ってみます。
コードはcanvas要素下に記述しています。
デモ： http://jsfiddle.net/9uxvfgng/4
<button type="button" onclick="canvas.isDrawingMode = !canvas.isDrawingMode">選択</button>
■CanvasをJSON形式で扱う
・JSONに変換する
デモ： http://jsfiddle.net/9uxvfgng/5
下のコードを書いてボタンを押すと、JSON化されたCanvasの内容がアラート表示されます。
<button type="button" onclick="alert(JSON.stringify(canvas))">JSON</button>
・JSONをロードする
JSON形式で保存したデータをCanvas上にロードします。
(先ほどアラートで出力したデータが変数dataに入っていることを前提にしています。)
デモ： http://jsfiddle.net/9uxvfgng/6
canvas.loadFromJSON(data).renderAll()
■CanvasをSVG形式で扱う
・SVGに変換する
下のコードを書いてボタンを押すと、SVG化されたCanvasの内容がアラート表示されます。
デモ： http://jsfiddle.net/9uxvfgng/7
<button type="button" onclick="alert(canvas.toSVG())">SVG</button>
・SVGをロードする
SVG形式で保存したデータをcanvas上にロードします。
(先ほどアラートで出力したデータが変数dataに入っていることを前提にしています。)
デモ： http://jsfiddle.net/9uxvfgng/8
fabric.loadSVGFromString(data, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
■削除する
最後に、Canvas上に描いた内容を全て削除する処理です。コードはcanvas要素下に記述しています。
デモ： http://jsfiddle.net/9uxvfgng/9
<button onclick="canvas.clear().renderAll()">全て削除</button>
※本記事の内容は8月29日時点、バージョン1.4.0の情報を元に記述しています。
※デモはjsfiddle上で動作するよう記事のコードに変更を加えています。
