Fabric.js是一個可以簡化Canvas程式編寫的函式庫。 Fabric.js為Canvas提供所缺少的物件模型, svg parser, 互動和一整套其他不可或缺的工具。由於Fabric.js為國外框架，官方API雜亂繁多，相關文檔大多為英文文檔，而且數量不多，所以本文旨在幫助新手在專案中快速上手Fabric.js，享受繪製Canvas的過程。
為什麼要使用Fabric.js？Canvas提供一個好的畫布能力, 但是Api不夠友好。繪製簡單圖形其實還可以, 不過做一些複雜的圖形繪製, 編寫一些複雜的效果，就不是那麼方便了。 Fabric.js就是為此而開發，它主要就是用物件的方式去寫程式碼。
Fabric.js能做的事情
Vue專案中引入Fabric.js
假設您的專案中正在使用ES6和Webpack，您可以開始使用Fabric.js，如下所示：
1、在命令列中：
npm install fabric（或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,//距離畫布左側的距離，單位是像素top:100,//距離畫布上邊的距離fill:'red',//填滿的顏色width: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//設定圖形順時針旋轉角度}); canvas.add (imgInstance);//加入到canvas中JavaScript插入圖片
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//圖片縮小10倍canvas.add(oImg ); });互動對畫布的交互 canvas.add(imgInstance);//加入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({ width: 100, height: 50, fill: 'green' }); rect.on('selected', function() { //選取監聽事件console.log('selected a rectangle'); }); var circle = new fabric.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 ：物件被移除new fabric.Group():接受兩個參數：要組合物件名稱所組成的陣列、組合在一起的物件的共同屬性。
var canvas = new fabric.Canvas('canvas'); var circle = new fabric.Circle({//繪製圓形radius: 100, fill: '#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(group);序列化與反序列化序列化
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ 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:20,height:20,fill:green,overlayFill:null }')SVG
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); canvas.add(rect); canvas.toSVG() ;參考文件：http://fabricjs.com/articles/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。