CaveDraw源码03：桌面端和移动端鼠标事件的逻辑

initDrawEvents() {
    this.startPoint = {
        x: undefined,
        y: undefined
    }
    this.lastPoint = {
        x: undefined,
        y: undefined
    };
    this.endPoint = {
        'x': undefined,
        'y': undefined
    };

    let painting = false;

    // 鼠标按下事件
    this.template.canvasEle.addEventListener(Utils.nameMap.dragStart, (e) => {
        // console.log("onmousedown");
        e.preventDefault();
        painting = true;
        this.startPoint = this._getPoint(e);
        this.lastPoint = this.startPoint;
        this.shape.startDraw();
    });

    // 鼠标移动事件
    this.template.canvasEle.addEventListener(Utils.nameMap.dragMove, (e) => {
        // console.log("onmousemove");
        e.preventDefault();
        if (!painting) return;
        this.endPoint = this._getPoint(e);
        // 移动端没有 mouseout 事件，但绑定在 canvasEle 的 touchmove 方法，在触摸点离开 canvasEle 仍然会触发
        // 可以用来检测，触摸点是否移出了 canvasEle
        if (Utils.isMobile && this._outCanvas(this.endPoint)) {
            // console.log("outCanvas");
            painting = false;
            if (this.shape.endDraw()) {
                this.drawDone();
            }
        } else {
            this.shape.drawing();
            this.lastPoint = this.endPoint;
        }
    });

    // 鼠标松开事件
    this.template.canvasEle.addEventListener(Utils.nameMap.dragEnd, (e) => {
        // console.log("onmouseup");
        e.preventDefault();
        if (!painting) return;
        painting = false;
        // 移动端的 touchend 事件是获取不到 e.touches[0] 的。直接使用 touchmove 事件的最后触摸点
        // this.endPoint = this._getPoint(e);
        if (this.shape.endDraw()) {
            this.drawDone();
        }
    });

    this.template.canvasEle.addEventListener('mouseout', (e) => {
        // console.log("mouseout");
        e.preventDefault();
        if (!painting) return;
        painting = false;
        if (this.shape.endDraw()) {
            this.drawDone();
        }
    });
}

_outCanvas(point) {
    if (point.x > 0 && point.x < this.template.canvasEle.width && point.y > 0 && point.y < this.template.canvasEle.height) {
        return false;
    } else {
        return true;
    }
}