#青训营笔记创作活动#
2月1日 打卡day14
# fabric开发图片编辑器

## 架构设计

选型: fabric.js 和 konva.js都是强大的canvas库,功能上类似,konva.js比较新中文文档也多一些
要点:因为框架用的vue,主要解决如何把fabric的实例对象共享给各个功能组件,区分出是未选中、单选、多选状态,然后将选中、取消选中事件暴露给各个功能组件,子组件根据状态进行独立的功能开发
方法:在入口文件中初始化实例,然后与mixins结合,在mixins中定义了选择类型(多选、单选、未选中)、选中元素类型、选中id等属性,以及选中、取消选中的事件,子组件通过引入mixins来开发对应功能;如子组件需要对fabric对象进行操作,则可以通过inject获得原始对象。

## 初始化
初始化比较简单,fabric.js创建对象,用EventEmitter创建事件发射器,可订阅单选、多选、取消选择事件。 通过vue的provide语法把fabric对象、EventEmitter对象向下传递,在mixins中保存选中的元素和选
展开
评论