Fabric.js 实战开发使用介绍

原生canvas用的多的有哪些槽点就不用我多说了；fabric 作为一个canvas库，提供了非常高效、直观的API操作，使我们对涉及canvas相关的功能开发效率大幅提升~~~~

简单记录下自己的心得；以下是对比canvas来说的优势：

1.简单来讲fabric使我们在平面上绘制图形(直线、圆、折线、路径、文本等)、加载图片、svg等都更加简单、直观；后续统称这些为图形；

2.使我们操作图形便捷很多，位置、大小、颜色、角度等属性；不必像canvas一样考虑重新绘制问题；

3.监听图形变化、鼠标操作等，便于与用户进行操作交互和功能统一处理等；

4.可方便的获取、设置任何图形的各个信息，如点坐标、矩阵变化数据、图形类型、颜色、角度、宽高、中心点(包括其他点位)等；

还有很多全凭自己想象！结合fabric提供的API进行大胆的开发！
就单单靠上述4个，就可以开发非常多且复杂的功能！如：撤销、重做，clipper图形剪辑，拆分图形，对齐图形，任意形式的批量创建，PS钢笔绘制，图片截取，复制粘贴，导入导出数据等；

---

想要玩好fabric，那么对canvas和svg是一定 需要有理解的！即便你fabric，canvas，svg现在都不懂的情况下。这些都是相辅相成的，因为光看fabric的文档，并不能让你如鱼得水。

但是不需要担心，个人感觉这些并不难，半年前的我对这3个也是都不懂，在新项目中边开发边看资料看文档，现在对这3也颇有理解且实战经验颇为丰富了，仅次于领导了哈哈。

---

相关功能对应文章： （会慢慢补充）

1. 项目中涉及绘图之类，需要键盘快捷键响应各工具功能的，自然少不了快捷键的功能模块，该功能实现就查看该文章即可；hotkeys-js库实战记录 - 监听键盘按键(快捷键)-CSDN博客
2. 想要在画布上方便的自由绘图、查看内容、操作各功能等，自然少不了对画布的灵活缩小、放大、拖动显示位置、自适应恢复布局等。  Fabric 画布缩放、拖动、初始化大小-CSDN博客
3. 操作鼠标自由绘制图形：矩形、圆形、直线等，根据自身对fabric的掌握程度，弄出各种图形组合都没问题；[fabrc.js] 操作鼠标自由绘制图形：矩形、圆形、直线等图形-CSDN博客

说实话如果只是贴些简单代码，告诉如何初始化fabric，画矩形，画圆形，给点颜色、设置坐标、设置角度什么的，完全没意思。这些都太简单了，也显得文章太水了哈哈。所以后续都以个人实战中的项目功能为例，进行分享、说明、个人回顾记录。