FabricJSを使ってみた

FabricJSというのは、SVG要素をCanvas化したりまたその逆ができちゃうCanvas用のJavaScriptライブラリです。お互いに変換できるだけじゃなく、canvasの1つ1つのオブジェクトを認識して簡単なマウス操作で回転したり移動リサイズできるようにしてくれます。

画像系の何かアプリみたいなのを作れたらいいなぁと思ったので使ってみました。

環境を整える

今回はJavaScriptをWebpack2でビルドして使います。なので、FabricJSと共に、Webpack関連もインストールします。

npm i -S fabric
npm i -D webpack webpack-dev-server

そしてwebpack.config.jsはこんな感じにします。

module.exports = {
  entry: './dev.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  }
}

後は同じディレクトリにdev.jsと、bundle.js<script/>で読み込んだ*.htmlを作って、$(npm bin)/webpack-dev-serverして、localhost:8080にアクセスできれば準備万端です。

Hello FabricJS!

最初なので簡単にdev.jsをこんな感じにします。Canvasに渡している文字列cは、<canvas/>idを指定します。

テキストを入れるメソッドはfabric.Textです。ポジションの他にCSSのようにスタイルを指定できます。

const {fabric} = require('fabric');

document.addEventListener('DOMContentLoaded', init, false);
function init() {
  const canvas = new fabric.Canvas('c');
  const hello = new fabric.Text('Hello FabricJS!', {
    left: 50,
    top: 50,
    // fontFamily: 'Comic Sans'..
    // fontSize: 40
    // fontWeight: 'normal'
    // textDecoration: 'underline'
    // shadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
    // fontStyle: 'italic',
    // stroke: '#ff1318',
    // strokeWidth: 1
    // textAlign: 'right'
    // lineHeight: 3
    // textBackgroundColor: 'rgb(0,200,0)'
  });
  canvas.add(hello);
}

これでこの画像のように表示されるはずです。

![/javascript/images/tried-using-fabricjs/hello-fabricjs.png]

他にもSVGにあるような図形を作るようのクラスも用意されてます。僕がここに使い方書くよりfabric-intro-part-1#objectsを参照したほうが早い気がするので説明は割愛します。

  • fabric.Line
  • fabric.Circle
  • fabric.Triangle
  • fabric.Ellipse
  • fabric.Rect
  • fabric.Polyline
  • fabric.Polygon

画像を入れてみる

じゃあ今度はfabric画像を入れてみましょう。2通りの方法があって、まずページに存在する<img/>の画像を使いたい場合はfabric.Imageを使います。

const img = new fabric.Image(document.getElementById('img'), {
  scaleX: 0.3,
  scaleY: 0.3,
});
canvas.add(img)

もう一つが画像URLを使う場合です。こっちの場合はfabric.Image.fromURLを使います。

const imgURL = 'icon.png'
fabric.Image.fromURL(imgURL, img => {
  img.set({
    scaleX: 0.3,
    scaleY: 0.3,
  });
  canvas.add(img)
});

これで画像も入れることができました。

画像にはCSSのfilterのようにgrayscaleしたりする機能も用意されてます。こちらはfabric-intro-part-2#image_filtersとかfabric.Image.filtersに書かれてるので必要な場合は参照したらいいと思います。

画像を保存できるようにする

saveボタンをクリックするたびbase64画像を作って、右クリックで保存できるようにします。まず*.htmlにボタンを追加して、

<canvas id="c"></canvas>
<button id="save">save</button>

dev.jsに処理を追加します。canvas.toDataURLでデフォルト設定でPNGなBase64画像が作られます。そして、それを<img/>に渡してるだけです。

function init() {
  // ... (initの最後)
  const saveBtn = document.getElementById('save');
  const img = document.createElement('img');
  document.body.appendChild(img);
  saveBtn.addEventListener('click', save, false);

  function save() {
    const png = canvas.toDataURL();
    img.src = png;
  }
}

とりあえずこれで、saveボタンを押すたびその時のCanvasの状態の画像が出来上がって保存できるようになりました。

何となく使い方も分かったので、時間があれば何か作りたいと思います😇