基于fabricjs搭建canvas画布 - 画笔、橡皮擦
画笔
fabric提供了Brush类， 这里我们使用PencilBrush来实现简单的画笔功能，主要包括画笔颜色更改、笔尖大小更改。
方便复用我们创建一个Brush 类来实现
class Brush {
constructor() {
this.freeDrawingBrush = null;
}
/**
*新建画笔
*
* @param {Object} canvas 当前画布对象
*/
create(canvas) {
canvas.isDrawingMode = true;
if (canvas.isDrawingMode) {
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
this.freeDrawingBrush = canvas.freeDrawingBrush;
}
}
/**
*设置画笔颜色
*
* @param {string} value 橡皮擦颜色
*/
setColor(value) {
this.freeDrawingBrush.color = value;
}
/**
*设置画笔宽度
*
* @param {number} value 橡皮擦宽度
*/
setWidth(value) {
this.freeDrawingBrush.width = parseInt(value, 10) || 1;
}
/**
*销毁画笔
*
* @param {Object} canvas 当前画布对象
*/
destory(canvas) {
canvas.freeDrawingBrush = null;
canvas.isDrawingMode = false;
this.freeDrawingBrush = null;
}
}
创建消耗时需要把前面创建的canvas对象传进来
橡皮擦
fabric没有橡皮擦相关的实现。我们先来简单的梳理一下橡皮擦的功能，其实很简单就是鼠标滑过的地方按照轨迹清除相关的元素。反过来实现我们可以进行轨迹背景填充。也就是使用画笔来实现橡皮擦的轨迹填充上canvas的背景色。
具体功能实现可以调用上main的Brush类。这里就不在重复实现。
