Fabric.js は、Canvas プログラムの作成を簡素化するライブラリです。 Fabric.js は、Canvas に不足しているオブジェクト モデル、SVG パーサー、対話機能、その他の不可欠なツールをすべて提供します。 Fabric.js は外国のフレームワークであるため、公式 API は複雑で多く、関連ドキュメントのほとんどが英語であり、数も少ないため、この記事は初心者がすぐに Fabric.js を使い始めるのに役立つことを目的としています。プロジェクトを作成し、キャンバスを描画するプロセスを楽しみます。
Fabric.js を使用する理由Canvas は優れたキャンバス機能を提供しますが、API は十分にフレンドリーではありません。単純なグラフィックを描画するのは実際には問題ありませんが、複雑なグラフィックを描画したり、複雑なエフェクトを記述したりするのはあまり便利ではありません。 Fabric.js はこの目的のために開発されました。主にオブジェクトを使用してコードを記述します。
Fabric.jsでできること
Vue プロジェクトへの Fabric.js の導入
プロジェクトで ES6 と Webpack を使用していると仮定すると、次のように Fabric.js の使用を開始できます。
1. コマンドラインで次のようにします。
npm install ファブリック (または、yarn add ファブリック)
2. .vueファイルに導入します
「ファブリック」から { ファブリック } をインポートします3. Fabric.js の旅を、 .vue内の単一ファイルのmounted:ライフ サイクルで開始します。
注: デフォルトのファブリック npm モジュールは非常に大きなパッケージを生成します。 Fabric.js に必要のないパッケージが多数ある場合は、ここまたはコマンド ラインで独自のバージョンをビルドできます。
グラフィックを描く通常のグラフィックを描画する1. キャンバスを宣言する
var Canvas =新しいファブリック.Canvas('main');2.グラフィックを描く
var rect = new Fabric.Rect({ left:100,//キャンバスの左側からの距離 (ピクセル単位) top:100,//キャンバスの上端からの距離 fill:'red',//塗りつぶしの色の幅:30 ,//正方形の幅 height:30//正方形の高さ});3. キャンバスにグラフィックを追加する
Canvas.add(rect);
その他のルールグラフィック:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.Triangleパス描画を使用する: 点と線の動きを使用して描画します。線、曲線、円弧を適用して、非常に複雑な形状を描きます。
Fabric.Path()メソッドにおいて、Mは移動コマンドを表しており、このM 00 はブラシを(0,0)点座標に移動することを表しています。
L は線を表します。L 200 100 は、ペンを使用して (0,0) 座標から (200,100) 座標まで線を描くことを意味します。 z は、シェイプのパスを閉じることを意味します。
三角形を描画した後、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');//キャンバスを宣言します var imgElement = document.getElementById('img');// 画像を宣言します var imgInstance = new Fabric.Image(imgElement,{ //画像の位置と外観を設定します left:100、top:100、width:200、height:100、angle:30 //グラフィックの時計回りの回転角度を設定します}); (imgInstance) ;//キャンバスに追加JavaScriptの画像挿入
var Canvas = new Fabric.Canvas('canvas'); Fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//画像は Canvas の 10 倍に縮小されます。追加(oImg });交流キャンバスとのインタラクション Canvas.add(imgInstance);//キャンバスに追加 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 = 新しい生地.Canvas('canvas'); var rect = 新しい生地.Rect({ 幅: 100, 高さ: 50, 塗りつぶし: '緑' }); // リスニング イベントを選択します console.log('長方形を選択しました') }); var Circle = new Fabric.Circle({ radius: 75, fill: 'blue' }); 円.on('選択', function() { console.log('円を選択'); }); キャンバス.add(円);注: 一般的に使用される監視イベントは次のとおりです。
after:render : キャンバスが再描画された後object:selected : オブジェクトが選択されていますobject:moving : オブジェクトの移動object:rotating : オブジェクトが回転しますobject:added : オブジェクトが追加されましたobject:removed : オブジェクトが削除されましたnew Fabric.Group(): 2 つのパラメータを受け入れます。結合されるオブジェクトの名前で構成される配列と、結合されるオブジェクトの共通属性です。
var Canvas = new Fabric.Canvas('canvas'); var Circle = new Fabric.Circle(//円を描画します。半径: 100、塗りつぶし: '#f00'、scaleY: 0.5、originX: 'center'、//中心点の X 軸座標を調整しますoriginY: 'center'//中心点の Y 軸座標を調整します}); var text = new Fabric.Text('Hello World', {//描画テキスト fontSize: 30,originX: 'center',originY: 'center' }) //結合 var group = new Fabric.Group([circle, text], { left: 150, top: 100, angle: 10 }) Canvas.add (グループ）;シリアル化と逆シリアル化連載化
var Canvas = 新しいファブリック.Canvas('canvas'); var rect = 新しいファブリック.Rect({ 幅: 100, 高さ: 100, 塗りつぶし: 'red' }); .stringify(canvas.toJSON()));逆シリアル化
var Canvas = 新しいファブリック.Canvas('canvas'); Canvas.loadFromJSON('{objects:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var Canvas = 新しいファブリック.Canvas('canvas'); var rect = 新しいファブリック.Rect({ 幅: 100, 高さ: 100, 塗りつぶし: 'red' }); Canvas.add(rect); ;参考ドキュメント: http://fabricjs.com/articles/
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。