基于fabricjs搭建canvas画布 - 画笔、橡皮擦

526 阅读1分钟

基于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类。这里就不在重复实现。

上一篇:基于fabricjs搭建canvas画布 - 图片基础操作 - 掘金 (juejin.cn)

下一篇:基于fabricjs搭建canvas画布 - 画布下载 - 掘金 (juejin.cn)