之前写过一篇笔记《使用fabric.js 快速开发一个图片编辑器》，简单介绍了如何用vue和fabric.js快速开发一个编辑器。当时的版本比较粗糙，只能说是Demo的基础版本，很多细节还不够完善，参考设计稿设计编辑器和MakerPost，优化了很多必要的细节，就可以了作为fabric.js的高级用法，整理成笔记分享。项目地址：https://github.com/nihaojob/v...预览地址：https://nihaojob.github.io/vu...正文1.架构演变最早的设计是fabric.js创建的canvas通过provide将对象传递给子组件，将功能代码封装到vue组件中。前期基本功能还能满足，后期迭代发现功能代码无法复用。比如复制功能，本来就是以按钮的形式存在的，所有的代码都在复制组件里面。在后面的迭代中，应该在快捷键和右键菜单中加入复制功能，没办法复用；所以在原来的基础上，封装了Editor对象，将通用的方法挂载到Editor对象上，实现复用。实现代码：https://github.com/nihaojob/v...2.辅助线辅助线是一个非常常用和必要的功能。官方提供了辅助线的方法。在官方仓库中，只需要引入方法即可。实现代码：https://github.com/fabricjs/f...3、maker贴的控件条样式设计稿和元素控件条看起来很精致，而fabric.js自带的控件条相对simple，可以通过自定义style方法，把控制条修改的更漂亮一点。实现代码：https://github.com/nihaojob/v...4、右键菜单fabric.js没有右键菜单的功能，但是可以监听右键菜单事件。我们可以通过监听方法Function来实现右键菜单。实现代码：https://github.com/nihaojob/v...五、快捷键功能快捷键可以提高操作效率，比如组合/拆分组合，复制，删除等，只需要组合快捷键事件与Editor's的功能方法可以绑定，快速实现快捷键功能。快捷键监控有现成的工具库hotkeys-js，只需要绑定事件即可。实现代码：https://github.com/nihaojob/v...6、锁定图层，锁定元素，使元素不可编辑，比如下图中的白底元素。设置好大小和位置后，不想选中，可以设置图层锁定，这样在编辑上层元素的时候，会干扰到下层元素。使用selectable属性来控制不可选择的元素。需要注意的一点是，我们在遍历所有元素的时候，需要单独处理加锁的元素。实现代码：https://github.com/nihaojob/v...7.画布大小调整最早版本的画布大小调整是fabric.js调整画布大小。这种方式存在两个问题。一种是没有方法是在json文件中保存canvas的大小。另一个问题是画布缩小时，画布的颜色和缩小后的背景色一样，无法区分画布的边界，效果差。最终的实现思路是用矩形元素来模拟画布区域。fabric.js的画布大小是根据视口DOM的宽高自适应的。通过调整矩形元素的属性来设置画布的大小和颜色，通过属性面板修改其他元素的属性。这解决了以上两个问题。实现代码：https://github.com/nihaojob/v...8.元素canvas超出区域参考draftdesignandmakerposteditor，有一个细节，就是元素拖出canvas的时候区域，看没有元素但是可以显示控制条。由于画布是由矩形模拟的，所以可以很容易地通过clipPath来实现。实现代码：https://github.com/nihaojob/v...9.拖拽到画布将基本元素添加到画布有两种方式，一种是点击元素，它会被添加到画布中心，另一种是将元素直接拖放到画布上，可以将元素添加到指定位置，并使用拖动事件来实现。实现代码：https://github.com/nihaojob/v...10.渐变配置渐变在背景和字体颜色中的使用非常普遍。Fabric.js有一个渐变的配置方法。我们只需要遵循两种类型：纯色和渐变只需在方法中设置颜色即可，功能已经实现，细节有待优化，暂未合并到主分支中。实现代码：https://github.com/nihaojob/v...在开源过程的最后，遇到了很多志同道合的开发者，他们为项目提供了思路、代码、PR，并做出了项目从0星上升到600星。感谢大家的帮助，希望能继续迭代打磨一款像设计稿和创客贴一样好用的开源图形编辑器。目前的版本还在迭代中，很多细节还没有完善，基础功能还在添加中，比如滤镜设置，图片替换，图片裁剪，字体样式模板等。还有一些文档，vue3升级，单元测试.我在开发过程中也学到了很多东西。如果你也有兴趣，你是fabric.js的粉丝或者你自己也在开发类似的项目，欢迎加入交流群，期待你的Issue和PR，一起创建项目。一个易于使用的设计编辑器。致谢：June曾多次深夜为项目贡献代码，提供快捷键、右键菜单等功能。小泽妈妈在百忙之中提交了项目代码，让属性面板更加美观。国外开发者朋友icleitoncosta，提供国际化功能。asang28提供了项目的vue3版本代码。韩晓℡是一个会自己写编辑器的设计师，多次为项目提供代码示例。RHS提供缩放思路，项目缩放代码。放牛哥为项目提供了代码和实现思路。冯志辉一直跟着我们，为我们加油。……篇幅有限，就不一一列举了。感谢您的支持和帮助。希望vue-fabric-editor以后不负众望，和大家一起越来越好。
