仿写一个设计编辑器

根据掘进大佬大佬的文章仿写一个设计编辑器第一天

大佬原文章
设计编辑器使用主要使用vue+Element-ui+fabric.js完成
今天首先稍微写了一下部分组件 和部分功能
中间的画板:在入口组件中通过fabric.Canvas进行创建

mounted() {
this.canvas = canvas.c = new fabric.Canvas("canvas");
},   

使用EventEmitter给画板中的元素绑定m择事件

// 对事件进行封装

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

在主页面中通过provide把fabric,EventEmitter,canvas分享给其子组件

实现的功能：点击模板加SVG图片绘制到画布上 使用fabric.js的loadFromJSON()方法从指定的json数据中还原出Canvas

methods: {
// 插入SVG文件
insertSvgFile() {
var loadingInstance = this.$Loading.service({
fullscreen: true,
text: "拼命加载中...",
});
//下载所需的字体
downFontByJSON(this.jsonFile)
.then(() => {
this.canvas.c.loadFromJSON(
this.jsonFile,
this.canvas.c.renderAll.bind(this.canvas.c)
);
loadingInstance.close();
})
.catch((error) => {
console.log(error);
});

// 获取模板内容
getTempData(tempUrl) {
const getTemp = this.$http.get(tempUrl);
getTemp.then((res) => {
this.jsonFile = JSON.stringify(res.data);
// 将svg文件插入
this.insertSvgFile();
  });
 },
},

今天就写这么多 第一次写文章也不知道该怎么写