使用 fabric-js 快速開發一個圖片編輯器

最近自己開發了一個圖片編輯器，把源碼也放在了 GitHub 上，順便也總結下使用 fabric.js 開發一個編輯器需要用到哪些知識點。

• 預覽地址：nihaojob.github.io/vue-fabric-…[1]

• GitHub 地址：github.com/nihaojob/vu…[2]

架構設計

選型： fabric.js 和 konva.js 都是強大的 canvas 庫，功能上類似，konva.js 比較新中文文檔也多一些，因爲比較熟悉 fabric 就沒有采用 konva。

要點： 因爲框架用的 vue，主要解決如何把 fabric 的實例對象共享給各個功能組件，區分出是未選中、單選、多選狀態，然後將選中、取消選中事件暴露給各個功能組件，子組件根據狀態進行獨立的功能開發。

我的方法是在入口文件中初始化實例，然後與 mixins 結合，在 mixins 中定義了選擇類型（多選、單選、未選中）、選中元素類型、選中 id 等屬性，以及選中、取消選中的事件，子組件通過引入 mixins 來開發對應功能；如子組件需要對 fabric 對象進行操作，則可以通過 inject 獲得原始對象。

入口文件：github.com/nihaojob/vu…[3]

mixins 文件：github.com/nihaojob/vu…[4]

初始化

初始化比較簡單，fabric.js 創建對象，用 EventEmitter 創建事件發射器，可訂閱單選、多選、取消選擇事件。通過 vue 的 provide 語法把 fabric 對象、EventEmitter 對象向下傳遞，在 mixins 中保存選中的元素和選中狀態。

初始化： github.com/nihaojob/vu…[5]

事件發射器：

import EventEmitter from 'events'

class EventHandle extends EventEmitter {

    init(handler){
        this.handler = handler
        this.handler.on("selection:created", (e) => this._selected(e));
        this.handler.on("selection:updated",  (e) => this._selected(e));
        this.handler.on("selection:cleared", (e) => this._selected(e));
    }

    // 暴露單選多選事件
    _selected(e) {
        const actives = this.handler.getActiveObjects()
        if(actives && actives.length === 1) {
            this.emit('selectOne', actives)
        }else if(actives && actives.length > 1){
            this.mSelectMode = 'multiple'
            this.emit('selectMultiple', actives)
        }else{
            this.emit('selectCancel')
        }
    }
}

export default EventHandle

mixins:

export default {
  inject: ['canvas', 'fabric', 'event'],
  data() {
    return {
      mSelectMode: '', // one | multiple
      mSelectOneType: '', // i-text | group ...
      mSelectId: '', // 選擇id
      mSelectIds: [], // 選擇id
    }
  },
  created(){
    this.event.on('selectOne', (e) => {
      this.mSelectMode = 'one'
      this.mSelectId = e[0].id
      this.mSelectOneType = e[0].type
      this.mSelectIds = e.map(item => item.id)
    })

    this.event.on('selectMultiple', (e) => {
      this.mSelectMode = 'multiple'
      this.mSelectId = ''
      this.mSelectIds = e.map(item => item.id)
    })

    this.event.on('selectCancel', () => {
      this.mSelectId = ''
      this.mSelectIds = []
      this.mSelectMode = ''
      this.mSelectOneType = ''
    })
  },
  methods: {
    /**
     * @description: 保存data數據
     * @param {Object} data 房間詳情數據
     */
    _mixinSelected({ event, selected }) {
      if(selected.length === 1) {
        const selectItem = selected[0]
        this.mSelectMode = 'one'
        this.mSelectOneType = selectItem.type
        this.mSelectId = [selectItem.id]
        this.mSelectActive = [selectItem]
      }else if(selected.length > 1){
        this.mSelectMode = 'multiple'
        this.mSelectActive = selected
        this.mSelectId = selected.map(item => item.id)
      }else{
        this._mixinCancel()
      }
    },
    /**
     * @description: 保存data數據
     * @param {Object} data 房間詳情數據
     */
     _mixinCancel(data) {
      this.mSelectMode =''
      this.mSelectId= []
      this.mSelectActive =[]
      this.mSelectOneType = ''
    },
  }
}

背景設置

主要包括設置畫布大小、設置背景顏色、設置背景圖片，也可以設置背景重複方向。 代碼：[6]

// 設置大小
setSize() {
      this.canvas.c.setWidth(this.width);
      this.canvas.c.setHeight(this.height);
      this.canvas.c.renderAll()
},
// 設置背景圖片
setBgImg(target) {
      const imgEl = target.cloneNode(true);
      imgEl.onload = () => {
        // 可跨域設置
        const imgInstance = new this.fabric.Image(imgEl, { crossOrigin: 'anonymous' });
        // 渲染背景
        this.canvas.c.setBackgroundImage(imgInstance, this.canvas.c.renderAll.bind(this.canvas.c), {
          scaleX: this.canvas.c.width / imgInstance.width,
          scaleY: this.canvas.c.width / imgInstance.width,
        });
        this.canvas.c.renderAll()
        this.canvas.c.requestRenderAll();
      }
},
// 背景顏色設置
setColor(color) {
      this.canvas.c.setBackgroundColor(color, this.canvas.c.renderAll.bind(this.canvas.c))
      this.canvas.c.backgroundImage = ''
      this.canvas.c.renderAll()
}

插入元素

主要包括插入基礎元素文字、正方形、圓形、三角形、SVG 元素，詳見代碼 [7]：

addText() {
      const text = new this.fabric.IText('萬事大吉', {
        ...defaultPosition,
        fontSize: 40, id: uuid(),
      });
      this.canvas.c.add(text)
      this.canvas.c.setActiveObject(text);
},
addTriangle() {
      const triangle = new this.fabric.Triangle({
        top: 100,
        left: 100,
        width: 100,
        height: 100,
        fill: '#92706B'
      })
      this.canvas.c.add(triangle)
      this.canvas.c.setActiveObject(triangle);
},

導入 SVG 元素時，可以導入 SVG 文件或者字符串進行導入，調用 fabric 的 loadSVGFromURL、loadSVGFromString 方法進行導入，詳見代碼 [8]。

屬性調整

不同元素的屬性會有差異，但通用屬性是一致的，如填充顏色、座標、旋轉角度、透明度等，也有很多特定元素的特定屬性，如文字的字體屬性、圖片的濾鏡屬性等，詳見代碼 [9]。 字體屬性可以自定義字體，需要先下載字體後再進行設置，可以通過 fontfaceobserver 工具庫下載指定字體，成功後在設置字體名稱。

// 字體加載
var font = new FontFaceObserver(fontName);
font.load(null, 150000).then(() => {
    const activeObject = this.canvas.c.getActiveObjects()[0]
    activeObject && activeObject.set('fontFamily', fontName);
    this.canvas.c.renderAll()
    this.$Spin.hide();
}).catch((err) => {
    this.$Spin.hide();
})

元素對齊

元素對齊區分單選元素與多選元素，單選元素時只支持相對於畫布水平、垂直、水平垂直對齊。

// name爲 centerH | centerV | center
position(name){
  const activeObject = this.canvas.c.getActiveObject()
  if(activeObject){
    activeObject[name]()
    this.canvas.c.renderAll()
  }
}

多元素對齊有上下左右對齊、水平、垂直對齊，主要是通過獲得最邊緣元素的座標，然後進行計算排序，如頂部對齊代碼：

const activeObject = this.canvas.c.getActiveObject();
  if (activeObject && activeObject.type === 'activeSelection') {
        const activeSelection = activeObject;
        console.log(activeSelection)
        const activeObjectTop = -(activeObject.height / 2);
        activeSelection.forEachObject(item => {
          item.set({
                top: activeObjectTop,
            });
            item.setCoords();
            this.canvas.c.renderAll();
        });
    }
}

平均分配會複雜一些，需要計算出邊緣與元素間距，再進行設置，詳見代碼 [10]。

其他用法

編輯器經常需要給元素進行分組 / 拆分組合、調整層級、回退、快捷鍵、畫布放大 / 縮小、導入 / 導出文件等功能，不再一一羅列，這個小編輯器都已經支持，大家感興趣的可以看源碼。

• 組合 [11]

• 層級調整 [12]

• 快捷鍵實現 [13]

• 畫布放大縮小 [14]

• 導入 / 導出 [15]

總結

fabric.js 的功能很強大，可以很輕鬆的開發出一個簡版的圖片編輯器，自定義素材、模板、字體文件；還可以結合數據接口拼接模板生成圖片，很輕鬆的實現定製模板 + 生成圖片的功能，比如我的朋友藉助我的功能 + 成語接口生成成語圖片，在小紅書上斬獲了八千多的粉絲。

最後希望大家能夠通過這個項目學習到 fabric.js 的基礎用法，感興趣的話可以一起維護這款小編輯器，歡迎 star。

關於本文

作者：愚坤

https://juejin.cn/post/7155040639497797645

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/wDck5UcDecDAAgWYHiuNfw