关于fabric.js:使用fabricjs-快速开发一个图片编辑器

最近本人开发了一个图片编辑器，把源码也放在了 GitHub 上，顺便也总结下应用 fabric.js 开发一个编辑器须要用到哪些知识点。

• 预览地址：https://nihaojob.github.io/vu…
• GitHub 地址：https://github.com/nihaojob/v…

架构设计

选型： fabric.js 和 konva.js 都是弱小的 canvas 库，性能上相似，konva.js 比拟新中文文档也多一些，因为比拟相熟 fabric 就没有采纳 konva。

要点： 因为框架用的 vue，次要解决如何把 fabric 的实例对象共享给各个性能组件，辨别出是未选中、单选、多选状态，而后将选中、勾销选中事件裸露给各个性能组件，子组件依据状态进行独立的性能开发。

我的办法是在入口文件中初始化实例，而后与 mixins 联合，在 mixins 中定义了抉择类型（多选、单选、未选中）、选中元素类型、选中 id 等属性，以及选中、勾销选中的事件，子组件通过引入 mixins 来开发对应性能；如子组件须要对 fabric 对象进行操作，则能够通过 inject 取得原始对象。

入口文件：
https://github.com/nihaojob/v…

mixins 文件：
https://github.com/nihaojob/v…

初始化

初始化比较简单，fabric.js 创建对象，用 EventEmitter 创立事件发射器，可订阅单选、多选、勾销抉择事件。
通过 vue 的 provide 语法把 fabric 对象、EventEmitter 对象向下传递，在 mixins 中保留选中的元素和选中状态。

初始化：
https://github.com/nihaojob/v…

事件发射器：

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 = ''
    },
  }
}

背景设置

次要包含设置画布大小、设置背景色彩、设置背景图片，也能够设置背景反复方向。
代码：

// 设置大小
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 元素，详见代码：

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 办法进行导入，详见代码。

属性调整

不同元素的属性会有差别，但通用属性是统一的，如填充色彩、坐标、旋转角度、透明度等，也有很多特定元素的特定属性，如文字的字体属性、图片的滤镜属性等，详见代码。
字体属性能够自定义字体，须要先下载字体后再进行设置，能够通过 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();});
    }
}

平均分配会简单一些，须要计算出边缘与元素间距，再进行设置，详见代码。

其余用法

编辑器常常须要给元素进行分组 / 拆分组合、调整层级、回退、快捷键、画布放大 / 放大、导入 / 导出文件等性能，不再一一列举，这个小编辑器都曾经反对，大家感兴趣的能够看源码。

• 组合
• 层级调整
• 快捷键实现
• 画布放大放大
• 导入 / 导出

总结

fabric.js 的性能很弱小，能够很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还能够联合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的性能，比方我的敌人借助我的性能 + 成语接口生成成语图片，在小红书上斩获了八千多的粉丝。

最初心愿大家可能通过这个我的项目学习到 fabric.js 的根底用法，感兴趣的话能够一起保护这款小编辑器，欢送 star。

https://github.com/nihaojob/v…