🐸 使用 fabric.js 创建出来的画布默认是不能拖拽移动的，不过我们可以利用一些小技巧让画布具有被拖拽的能力。

🦄 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交（也可以叫元素是否重叠），这个方法叫 intersectsWithObject()。

最近想系统看下 canvas 这个东西，所以找了一个库看看，本来打算写一两篇文章沉淀一下，发现东西有点多😦，索性就拆成了系列文章。

Fabric.js本身并没有提供鼠标右键的事件，我查阅了文档，发现了一些小线索。于是我用相关api组合出一套右键菜单~

本文分别从原生和vue的环境下操作。上传图片到canvas里渲染出来，借助Fabric.js强大的能力去实现。

😹 逐步拆解 Fabric.js 拖拽生成元素。如何拖拽元素？如何在画布准确地找到鼠标当前坐标？如何进行坐标转换？本文都会逐一讲解～

🀄️ 如果你使用Fabric.js做编辑类的产品，有可能需要给用户配置字体。这次就讲讲在Fabric.js中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推一个精简字体库的工具

😼如果希望元素不会超出画布，就算超出了也会弹回画布里，不妨试试本文的方法：根据画布的宽高和元素的尺寸进行计算

如果你想用 canvas 画图，那不妨试试 Fabric.js 。跟着本文一步一步操作，一定可以入门 Fabric.js