BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

Canvasユーティリティライブラリ Fabric.jsマニュアル

2022-01-31 05:37:29

はじめにFabric.jsとは？

Fabric.jsは、Canvasアプリケーションの作成を容易にするためのライブラリです。Fabric.js は、不足しているオブジェクトモデル、svg パーサー、インタラクション、その他 Canvas に不可欠なツール一式を提供します。Fabric.jsは海外のフレームワークで、公式APIが雑多で充実しておらず、ドキュメントもほとんどが英語で、数も少ないので、この記事では、初心者がプロジェクトでFabric.jsを使いこなし、Canvasを描く過程を楽しめるようにすることを目的としています。

なぜFabric.jsを使うのか？

Canvasは良いCanvas機能を提供してくれますが、Apiはフレンドリーさが足りません。Fabric.jsはこのために開発されたもので、オブジェクトベースでコードを書くことができるのが特徴です。

Fabric.jsでできること

  • キャンバス上にグラフィック（画像、テキスト、通常のグラフィック、複雑なパス合成のグラフィックを含む）を作成、充填します。
  • グラデーションカラーでの塗りつぶし
  • グラフィックを合成する（合成されたグラフィック、グラフィックテキスト、画像などを含む）。
  • グラフィカルなアニメーションを設定する ユーザーとのインタラクションを設定する。
  • JSON、SVGデータなどを生成する。
  • 独自のドラッグ＆ドロップ機能を持つCanvasオブジェクトを生成します。

スタート

VueプロジェクトにおけるFabric.jsの紹介

プロジェクトでES6とWebpackを使っていると仮定して、以下のようにFabric.jsを使い始めることができます。

1. コマンドラインから 

npm install fabric (or yarn add fabric)

2. 持ち込む .vue ファイル 

import { fabric } from 'fabric'

3. には .vue の単一ファイルでは mounted: ライフサイクルでFabric.jsの旅を始める

注意：デフォルトのfabric npmモジュールはかなり大きなパッケージを生成するので、Fabric.jsに不要と思われるパッケージがたくさんある場合、その場合は、ここかコマンドラインで独自のバージョンを構築してください。

グラフィックの描画

通常のグラフをプロットする

1. キャンバスの宣言 

var canvas =new fabric.Canvas('main');

2. グラフィックの描画 

    var rect = new fabric.Rect({

           left:100,// distance from the left side of the canvas in pixels

           top:100,// distance from the top edge of the canvas

           fill:'red',//the color of the fill

           width:30,//the width of the square

          height:30//height of the square

       });

3. キャンバスにグラフィックを追加する 

canvas.add(rect);

その他、通常のグラフィック。

  • 正方形を描く var rect = new fabric.
  • 円を描く var circle = new fabric.
  • 三角形の描画 
    var triangle = new fabric.

不規則な図形を描く

パスで描画する。点と線の動きで描く。線、曲線、円弧を応用して非常に複雑な形状を描くことができます。

Path( )メソッドで、"M"は"Move"コマンドの略で、この"M 00" はブラシを点座標 (0,0) に移動させることを意味します。

L200100は、ペンで座標(0,0)から(200,100)まで線を引くことを意味します。

三角形を描画したら、set( )メソッドで三角形の位置、色、角度、透明度などのプロパティを設定することができます。

具体的なコードは以下の通りです。 

 var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);

画像に関する操作

HTMLによる画像の挿入 

     <body>
           <canvas id="canvas" width='800' height='800'></canvas>
           <img src=". /2.png" id="img">
       </body>
       ---------------------
       var canvas = new fabric.Canvas('canvas');// Declare canvas
       var imgElement = document.getElementById('img');//Declare our image     
       var imgInstance = new fabric.Image(imgElement,{ //set the image position and look
            left:100,
            top:100,
            width:200,
            height:100,
            angle:30//Set the clockwise rotation angle of the image
       });
      
       canvas.add(imgInstance);//add to canvas

JavaScriptによる画像の挿入 

     var canvas = new fabric.Canvas('canvas');
           fabric.Image.fromURL('. /2.png', function(oImg) {
           oImg.scale(0.1);//scale the image 10x
           canvas.add(oImg);
       });

インタラクション

キャンバスとのインタラクション 

    canvas.add(imgInstance);//add to canvas
       var canvas = new fabric.Canvas('canvas');
       canvas.on('mouse:down', function(options) {
           console.log(options.e.clientX, options.e.clientY)
       })

注）よく聞くイベントは以下の通りです。

  • mouse:down : マウスが押されたとき
  • mouse:move : マウスが動いたとき
  • mouse:up : マウスを上げたとき

キャンバス上のオブジェクトに対する操作 

     var canvas = new fabric.Canvas('canvas');

       var rect = new fabric;

       rect.on('selected', function() {//selected listener event

           console.log('selected a rectangle');

       });

 

       circle({ radius: 75, fill: 'blue' });

       circle.on('selected', function() {

           console.log('selected a circle');

       });

       canvas.add(rect);

       canvas.add(circle);

注）一般的に使用されるリスナーイベントは以下の通り。

  • after:render : キャンバス再描画後
  • object:selected : オブジェクトが選択されている
  • object:moving : オブジェクトの移動
  • object:rotating : 回転しているオブジェクト
  • object:added : オブジェクトが追加されたのは
  • object:removed : オブジェクトが削除されました

組合せ

新しい fabric.Group(): 2 つの引数を取ります: 結合されるオブジェクト名の配列と、結合されたオブジェクトの共通プロパティです。 

 var canvas = new fabric.Canvas('canvas');

        var circle = new fabric.

        radius: 100,

        fill: '#f00',

        scaleY: 0.5,

        originX: 'center',//adjust the X-axis coordinates of the center

        originY: 'center'//adjusts the center's Y-axis coordinates

      });

     Text('Hello World', {//draw text

       fontSize: 30,

       originX: 'center',

       originY: 'center'

    })

    // Make a group

    var group = new fabric.Group([circle, text], {

      left: 150,

      top: 100,

      angle: 10

    })

    canvas.add(group);

シリアライズとデシリアライズ

シリアライズ 

  var canvas = new fabric.Canvas('canvas');

    var rect = new fabric.

        width: 100,

        height: 100,

        fill: 'red'

    });

    canvas.add(rect);
    
    console.log(JSON.stringify(canvas.toJSON()));

デシリアライズ 

var canvas = new fabric.Canvas('canvas');

    canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width& quot;:20,"height":20,"fill":"green","overlayFill":null}')

SVG 

   var canvas = new fabric.Canvas('canvas');

    var rect = new fabric.
        width: 100,
        height: 100,
        fill: 'red'
    });

    canvas.add(rect);

    canvas.toSVG();

参考ドキュメントです。 http://fabricjs.com/articles/

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します