fabric 鼠标点击绘制折线

import { fabric } from 'fabric';
import { KeyCode } from "./key-code";
import { Polyline } from "./polyline";

/**
 * 动态点击鼠标绘制折线
 * 键盘 Q 开始绘制，W 停止绘制，E 清空画布
 */
export class DynamicLine {
    isDrawing = false;
    points = [];
    sub = 0;
    // 当前绘制线信息
    line;

    constructor(canvas) {
        // 绑定鼠标动态绘制图形
        this.bindDrawEvent(canvas);
        // 绑定键盘事件，用于执行/结束折线绘制
        this.bindKeyboardEvent(canvas, this.points, this.line);
    }

    /**
     * 绑定鼠标动态绘制折线
     * @param canvas
     */
    bindDrawEvent(canvas) {
        let self = this;
        canvas.on('mouse:down', (e) => {
            if (self.isDrawing) {
                // 记录当前坐标点
                self.points.push({
                    x: e.e.offsetX,
                    y: e.e.offsetY,
                });
                self.sub++;
                self.drawLineByPoints(canvas, self.points, self.line);
            }
        });
        $(document).on('mousemove', (e) => {
            if (self.isDrawing) {
                self.points[self.sub] = {
                    x: e.originalEvent.offsetX,
                    y: e.originalEvent.offsetY,
                };
                self.drawLineByPoints(canvas, self.points, self.line);
            }
        });
        canvas.on('mouse:up', (e) => {
        });
    }

    /**
     * 根据传入 points ，绘制 line
     * @param canvas
     * @param points
     * @param line
     */
    drawLineByPoints(canvas, points, line) {
        this.line && canvas.remove(this.line);
        this.line = new fabric.Polyline(this.points, Polyline.defaultLine());
        // 添加图形至画布
        canvas.add(this.line);
        canvas.renderAll();
    }

    /**
     * 绑定键盘事件
     * @param canvas
     */
    bindKeyboardEvent(canvas) {
        $(document).on('keydown', (e) => {
            const key = e.originalEvent.keyCode;
            switch (key) {
                case KeyCode.Q:
                    this.isDrawing = true;
                    break;
                case KeyCode.W:
                    // 结束绘制当前线
                    this.isDrawing = false;
                    // 移除最后一个点的记录
                    this.points.pop();
                    this.drawLineByPoints(canvas, this.points, this.line);
                    // 清空之前选中，设置当前选中
                    canvas.discardActiveObject();
                    canvas.setActiveObject(this.line);
                    canvas.renderAll();
                    // 重置
                    this.resetData();
                    break;
                case KeyCode.E:
                    // 清空画布，重置值
                    this.resetData();
                    canvas.clear();
                    canvas.renderAll();
                    break;
            }
        });
    }

    /**
     * 重置绘制数据
     */
    resetData() {
        this.points = [];
        this.isDrawing = false;
        this.sub = 0;
        this.line = null;
    };
}