Fabricjs一個簡單強大的Canvas繪圖庫快速入門

場景

Fabric官網

http://fabricjs.com/

 

 

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項目

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

2、項目中引入fabric依賴

npm install fabric --save

 

 

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

http://fabricjs.com/articles/

 

 

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>