#青训营笔记创作活动#
12月16日 打卡day08
今日学习了如何使用fabric.js快速开发一个图片编辑器。
在入口文件中初始化实例,然后与mixins结合,在mixins中定义了选择类型(多选、单选、未选中)、选中元素类型、选中id等属性,以及选中、取消选中的事件,子组件通过引入mixins来开发对应功能;如子组件需要对fabric对象进行操作,则可以通过inject获得原始对象。
运用fabric.js创建对象,通过EventEmtter创建事件发射器,对订阅单选,多选,取消选择事件;通过vue的provide语法把fabric对象、EventEmitter对象向下传递,在mixins中保存选中的元素和选中状态。元素对齐区分单选元素与多选元素,单选元素时只支持相对于画布水平、垂直、水平垂直对齐。多元素对齐有上下左右对齐、水平、垂直对齐,主要是通过获得最边缘元素的坐标,然后进行计算排序,如顶部对齐代码:
展开
评论