こんにちは、渡辺です。
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」を紹介します。
Canvas上に描いた絵をマウス操作で動かしたり、拡大縮小する機能が標準で付いていてスゴい便利なライブラリです!
まず、このライブラリの主な特徴についてです。
Canvas上に描いたものをマウスやタッチで自由に操作できます(ドラッグ、拡大縮小、回転)。
Canvasに描いたものをgetメソッドやsetメソッド経由で設定変更できます。
Canvas上の内容をJSONまたはSVGに変換でき、再度インタラクティブな描画内容を復元することができます。
https://github.com/kangax/fabric.js 先の画面右下「Download ZIP」をクリックして、ライブラリをダウンロード。「dist」フォルダに入っている「fabric.js」または「fabric.min.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);