epmet-work-uni/ec-canvas/wx-canvas.js

export default class WxCanvas {
    constructor(ctx, canvasId, isNew, canvasNode) {
        this.ctx = ctx;
        this.canvasId = canvasId;
        this.chart = null;
        this.isNew = isNew;
        if (isNew) {
            this.canvasNode = canvasNode;
        } else {
            this._initStyle(ctx);
        }

        // this._initCanvas(zrender, ctx);

        this._initEvent();
    }
    getContext(contextType) {
        if (contextType === '2d') {
            return this.ctx;
        }
    }

    // canvasToTempFilePath(opt) {
    //   if (!opt.canvasId) {
    //     opt.canvasId = this.canvasId;
    //   }
    //   return wx.canvasToTempFilePath(opt, this);
    // }

    setChart(chart) {
        this.chart = chart;
    }
    addEventListener() {
        // noop
    }
    attachEvent() {
        // noop
    }
    detachEvent() {
        // noop
    }
    _initCanvas(zrender, ctx) {
        zrender.util.getContext = function () {
            return ctx;
        };
        zrender.util.$override('measureText', function (text, font) {
            ctx.font = font || '12px sans-serif';
            return ctx.measureText(text);
        });
    }
    _initStyle(ctx) {
        ctx.createRadialGradient = () => {
            return ctx.createCircularGradient(arguments);
        };
    }
    _initEvent() {
        this.event = {};
        const eventNames = [
            {
                wxName: 'touchStart',
                ecName: 'mousedown'
            },
            {
                wxName: 'touchMove',
                ecName: 'mousemove'
            },
            {
                wxName: 'touchEnd',
                ecName: 'mouseup'
            },
            {
                wxName: 'touchEnd',
                ecName: 'click'
            }
        ];
        eventNames.forEach((name) => {
            this.event[name.wxName] = (e) => {
                const touch = e.touches[0];
                this.chart.getZr().handler.dispatch(name.ecName, {
                    zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
                    zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
                    preventDefault: () => {},
                    stopImmediatePropagation: () => {},
                    stopPropagation: () => {}
                });
            };
        });
    }
    set width(w) {
        if (this.canvasNode) {
            this.canvasNode.width = w;
        }
    }
    set height(h) {
        if (this.canvasNode) {
            this.canvasNode.height = h;
        }
    }
    get width() {
        if (this.canvasNode) {
            return this.canvasNode.width;
        }
        return 0;
    }
    get height() {
        if (this.canvasNode) {
            return this.canvasNode.height;
        }
        return 0;
    }
}