数据可视化

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

🐥 创建一个矩形，这个矩形有自己的 ID 属性，在执行序列化操作出来的结果却看不到 ID 属性了？？？

0基础学Three.js，使用原生三件套的方式快速开启学习旅程，不需要麻烦的环境搭建。一文搞懂Three核心概念~

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

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

🪄 喷雾笔刷 SprayBrush 是 fabric.js 提供的一个很好玩的工具，而且 fabric.js 也封装好了很多非常方便的属性让我们配置，用起来非常简单的。

🦄 fabric.js 的铅笔其实是继承基础画笔的一个工具，在基础画笔的基础上多了“拐角平滑度”等配置项。 本文讲解铅笔的基础用法以及常用事件。

🎴 fabric.js 的前景图可以从视觉上覆盖画布中其他元素。前景图的使用方式和前景色差不多，但要考虑的情况会比前景色多一丢丢~

🎨用 fabric.js 创建画布时，fabric.js 会在 canvas 元素外包一层 div 容器。 如果想方便设置容器样式或者想通过 js 控制该容器，可以先给容器一个类名

🧣 fabric.js 在出厂时就提供了几个基础图形，比如矩形、圆形、三角形等。 但这些图形可能不能满足日常开发，我们可能还需要一些自定义的图形。

🍟当两个元素有部分重叠时，选中底层元素后，想通过被盖住的部分移动元素，该如何实现？实 Fabric.js 已经提供了相应的 API 去完成上面的需求了

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

😼在 fabric.js 里要想实现拖拽画布等效果，可以使用变换视窗的方式去实现，fabric.js 提供了 viewportTransform 方法可以完成这个需求。

🎈 使用 fabric.js 创建的图形，默认的缩放原点是元素操作点的对角点。如果想将默认缩放操作设置为“中心缩放”，只需将 centeredScaling 属性设置为 true 即可。

🎁框选是 fabric.js 默认提供的一种操作，框选动作是通过“选框”的方式展示的。本文讲解如何自定义框选样式。

🥇 如果你的项目使用到 fabric.js ，可以直接使用 fabric.js 提供的方法去遮盖画布，用法非常简单。

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

😡 fabric.js 为我们提供了很多厉害的方法。今天要搞明白的一个东西是 canvas.interactive

在 fabric.js 提供的文本组件中，默认状态是不会自动换行。如果你的使用场景中需要自动文本自动换行，可以使用 Textbox ，并将 splitByGrapheme 设置为 true

🐻在单页面应用中需要注意生命周期问题，比如使用 `fabric.js` 创建的画布，如果不做缓存页面，在离开页面前最好把画布销毁掉。本文就介绍一下如何销毁 fabric.js 实例