Fabric.js 简介。第 4 部分。

在上一个系列中，我们已经讨论了很多主题；从基本的对象操作到动画、事件、过滤器、组和子类。但是仍然有一些非常有趣和有用的事情要讨论！

免费绘图

如果说有什么<canvas>真正的亮点，那就是它对免费绘图的出色支持！由于画布只是一个 2D 位图——一张用于绘画的纸——执行自由绘图是非常自然的。当然，Fabric 会为我们解决这个问题。

isDrawingMode只需将Fabric 画布的属性设置为 ，即可启用自由绘图模式true。这立即使画布上的任何进一步点击和移动都被解释为铅笔/画笔。

您可以根据需要在画布上多次绘制，而isDrawingModeis true。但是，只要您执行任何移动，然后是“mouseup”事件，Fabric 就会触发“path:created”事件并将刚刚绘制的形状转换为真实fabric.Path实例！

如果在任何时候，您设置isDrawingMode回false，您最终会得到所有创建的路径对象仍然存在于画布上。而且由于它们是很好的旧fabric.Path对象，您可以随意修改它们——移动、旋转、缩放等。

还有 2 个属性可用于自定义免费绘图 -freeDrawingBrush.color和freeDrawingBrush.width. 两者都可以通过freeDrawingBrush实例在 Fabric 画布实例上使用。freeDrawingBrush.color可以是任何常规颜色值，代表�