122 lines
2.6 KiB
JavaScript
122 lines
2.6 KiB
JavaScript
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;
|
|
}
|
|
|
|
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) {
|
|
var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
|
|
'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
|
|
'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
|
|
];
|
|
|
|
styles.forEach(style => {
|
|
Object.defineProperty(ctx, style, {
|
|
set: value => {
|
|
if (style !== 'fillStyle' && style !== 'strokeStyle' ||
|
|
value !== 'none' && value !== null
|
|
) {
|
|
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
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
|
|
});
|
|
};
|
|
});
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|