場景

Fabric官網

Fabric.js Javascript Canvas Library

Fabric.js 是一個可以簡化 Canvas 程序編寫的庫。

Fabric.js 為 Canvas 提供所缺少的對象模型，svg parser，交互和一整套其他不可或缺的工具。

Canvas 提供一個好的畫布能力，但是 Api 不夠友好。繪制簡單圖形其實還可以，

不過做一些復雜的圖形繪制，編寫一些復雜的效果，就不是那么方便了。

Fabric.js 就是為此而開發，它主要就是用對象的方式去編寫代碼。

Fabric.js能做的事情

在Canvas上創建、填充圖形（包括圖片、文字、規則圖形和復雜路徑組成圖形）。

給圖形填充漸變顏色。

組合圖形（包括組合圖形、圖形文字、圖片等）。

設置圖形動畫集用戶交互。

生成JSON, SVG數據等。

生成Canvas對象自帶拖拉拽功能。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi?
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、搭建Vue項目

若依前后端分離版本地搭建開發環境并運行項目的教程：

若依前后端分離版手把手教你本地搭建環境并運行項目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分離文檔

2、項目中引入fabric依賴

npm install fabric --save

3、新建Vue頁面，參考官網入門教程

Tutorial — Fabric.js Javascript Canvas Library

4、頁面上添加一個canvas并設置其id為c

<template><canvas id="c" width="800" height="800"></canvas> </template>

5、頁面中引入fabric

import { fabric } from 'fabric'

6、頁面初始化之后在mounted方法中調用自定義方法init

? mounted(){this.init();},

7、在Init方法中

聲明畫布，繪制圖形，添加圖形至畫布

??? init(){// create a wrapper around native canvas element (with id="c")// 聲明畫布var canvas = new fabric.Canvas('c');// create a rectangle object// 繪制圖形var rect = new fabric.Rect({left: 100, //距離畫布左側的距離，單位是像素top: 100, //距離畫布上邊的距離fill: 'red', //填充的顏色width: 20, //方形的寬度height: 20 //方形的高度});// "add" rectangle onto canvas//添加圖形至畫布canvas.add(rect);},

8、效果

9、完整代碼

<template><canvas id="c" width="800" height="800"></canvas> </template><script>import { fabric } from 'fabric' export default {name: "HelloFabric",data() {return {};},mounted(){this.init();},methods: {init(){// create a wrapper around native canvas element (with id="c")// 聲明畫布var canvas = new fabric.Canvas('c');// create a rectangle object// 繪制圖形var rect = new fabric.Rect({left: 100, //距離畫布左側的距離，單位是像素top: 100, //距離畫布上邊的距離fill: 'red', //填充的顏色width: 20, //方形的寬度height: 20 //方形的高度});// "add" rectangle onto canvas//添加圖形至畫布canvas.add(rect);},}, }; </script>

總結

以上是生活随笔為你收集整理的Fabricjs一个简单强大的Canvas绘图库快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。