共计 2241 个字符，预计需要花费 6 分钟才能阅读完成。
之前写过一篇笔记，《应用 fabric.js 疾速开发一个图片编辑器》，简略介绍了如何用 vue 和 fabric.js 疾速开发一款编辑器。
过后的版本比拟毛糙，只能说是一个根底版的 Demo，很多细节不够欠缺，参考了稿定设计和创客贴的设计编辑器，优化了很多必要的细节，也算是 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、管制条款式
稿定设计和创客贴的元素管制条看起来都很粗劣，而 fabric.js 自带的管制条较为简陋，能够通过自定义款式办法把管制条润饰的略微好看一些。
实现代码：https://github.com/nihaojob/v…
4、右键菜单
fabric.js 并没有自带右键菜单的性能，但能够监听到右键菜单事件，咱们能够通过监听办法来实现右键菜单性能。
实现代码：https://github.com/nihaojob/v…
5、快捷键性能
快捷键能够进步操作效率，比方组合 / 拆分组合、复制、删除等，只须要将快捷键事件和 Editor 的性能办法做绑定即可疾速实现快捷键性能。
快捷键监听有现成的工具库hotkeys-js，只须要绑定事件即可。
实现代码：https://github.com/nihaojob/v…
6、锁定图层
锁定元素能够让元素不可编辑，比方下图中的红色背景元素，设置大小和地位后就不心愿再选中和它，能够设置图层锁定，这样编辑上方元素时就会烦扰到下方元素。
应用 selectable 属性管制元素不可选中，须要留神的点是，当咱们遍历所有元素时，要对锁定元素独自解决。
实现代码：https://github.com/nihaojob/v…
7、画布大小调整
最早的版本的画布大小调整就是对 fabric.js 的 canvas 大小做调整，这样做有 2 个问题，一是没方法将画布大小保留到 json 文件中，另外一个问题是放大放画布时，放大后画布色彩和背景色彩统一，无奈辨别画布的边界，成果较差。
最初的实现思路是，应用矩形元素模仿画布区域，fabric.js 的 canvas 大小依据视口 DOM 的宽高自适应，通过调整矩形元素属性来设置画布到大小和色彩，其余元素通过属相面板批改属性。这样就解决了上边的 2 个问题。
实现代码：https://github.com/nihaojob/v…
8、元素画布超出区域
参考稿定设计和创客贴的编辑器，都有一个细节，就是当元素拖出画布区域后，看不到元素但能够展现管制条，因为画布是通过矩形模仿进去的，通过 clipPath 能够便捷的实现。
实现代码：https://github.com/nihaojob/v…
9、拖拽到画布
将根底元素增加到画布有两种形式，一种是点击元素，会增加到画布地方，另一种是间接拖拽元素到画布，能够将元素增加到指定地位，应用拖拽事件实现。
实现代码：https://github.com/nihaojob/v…
10、突变配置
突变在背景、字体色彩上很罕用，fabric.js 有提供突变的配置办法，咱们只须要依照纯色、突变 2 种形式设置色彩即可，性能已实现，细节须要优化，没有合并到 main 分支。
实现代码：https://github.com/nihaojob/v…
结尾
开源过程中遇到很多气味相投的开发者，为我的项目提供思路、代码、PR，让我的项目从 0 涨到了 600star，感激大家的帮忙，心愿可能持续迭代，打磨成像稿定设计和创客贴一样好用的开源图形编辑器。
目前的版本仍在持续迭代，很多细节还不欠缺，根底性能还在补充，比方滤镜设置、图片替换、图片裁剪、字体款式模板等，还有一些文档、vue3 降级、单元测试的工作。
在开发的过程中我的播种也很大，如果你也比拟感兴趣，是 fabric.js 的爱好者或者本人也在开发相似的我的项目，欢送退出交换群，期待你的 Issue 和 PR，一起打造一款好用的设计编辑器。
致谢：
- June 屡次深夜为我的项目奉献代码，提供快捷键、右键菜单等性能。
- xiaozeo 宝妈百忙中为我的项目提交代码，让属性面板更好看。
- icleitoncosta 异国他乡的开发者敌人，提供了国际化性能。
- asang28 为我的项目提供了 vue3 版本代码。
- 晗萧℡ 会本人写编辑器的设计师，屡次为我的项目提供代码示例。
- RHS 为我的项目提供缩放思路、标尺代码。
- 放牛哥 为我的项目提供代码和实现思路。
- 冯志辉 始终在关注咱们，为咱们加油打气。
- …
篇幅无限，不再一一列举名单，感激大家的反对与帮忙，心愿 vue-fabric-editor 在将来的日子里不负冀望，和大家一起越变越好。
