最近本人开发了一个图片编辑器，把源码也放在了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 | centerposition(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...