Help us understand the problem. What is going on with this article?

canvasを便利にするfabric.jsの紹介と導入方法

More than 3 years have passed since last update.

開発環境

mac OS X Yosemite
Chrome 48.0.2564.103 (64-bit)
fabric.js v1.5.0

概要

fabric.jsとは何か

canvasを拡張するJavaScriptライブラリです。
日本語の資料があまりないのでここで布教しようかと思います。

公式サイト
公式サイトが(非公式に?)日本語訳されているサイト※記載されているバージョンが古いので情報は新しくないかもしれません。ご注意を。
github

どんな用途に使えるのか

マウス操作でcanvas内のオブジェクトを操作するなどの時には非常に便利だと思います。
手書きも簡単に実装できます。

公式には得意不得意について説明がされていますのでぜひこちらをご一読ください。

インストール

事前準備

以下URLよりダウンロード
github
※2016年2月16日現在、v.16のrc1が出ていますが、ここでは正式版のv.15を採用しています。

distフォルダ中のfabric.jsまたはfabric.min.jsをフォルダへ配置すれば良いです。
CDNの場合はhttp://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.jsを指定すれば良いです。

html

こちらを元に以下のように作成しました。
github html5-template

index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>fabric.js test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
    canvas {
      border: solid 3px #000;
    }
  </style>

</head>
<body>
  <p>テストキャンバスはこちら</p>
  <canvas id="test_canvas" width="500" height="500"></canvas>


<!-- SCRIPTS -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
</body>
</html>

JavaScript

動作確認だけなのでJavaScriptはこんな感じで書いておきます。

index.html
  <script type="text/javascript">
    //window.onloadを使い、htmlが読み込みされてからスクリプトを動作させる。
    window.onload = function(){
      var canvas = new fabric.Canvas('test_canvas');

      canvas.isDrawingMode = true;
      canvas.freeDrawingBrush.color = '#000000';
      canvas.freeDrawingBrush.width = 5;
    }
  </script>

解説。と気をつけること

canvas layer

fabric.jsにおけるcanvasはnew fabric.Canvas(#id)のように作成します。

この際気をつけるのはnewが動作した際にCanvas#idはCanvas.upper-canvasCanvas.lower-canvas#idに分けられます。

※重要:説明はこちらを見てください。英語ですがわかりやすいです。
How fabric canvas layering works

おそらくフリーハンドなど操作中のものはupper-canvasに配置され、位置が確定したものはlower-canvasに配置されているものと思われます。

従ってcanvasに対してcss:positionを使って位置を動かしたい場合、自分で作成したCanvas#test_canvasに対してではなく、Div.canvas-containerに対して適用する必要があります。

フリーハンドのパラメータ

isDrawingModeはtrue/falseでフリーハンド描画モードかそうでないかを切り替えられます。
使い方としてはjQueryでon/offするなどが考えられます。

他のパラメータはshadowなどがあります。
canvas.freeDrawingBrush.setShadow("2px 2px 10px rgba(0,0,0,0.2)")と書けば、フリーハンドで描いた線に影がつきます。

今回使用したファイル

github

とりあえずはこんな感じで。
続きはまた書きます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした