| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- export default class WxCanvas {
- constructor(ctx, canvasId) {
- this.ctx = ctx
- this.canvasId = canvasId
- this.chart = null
- WxCanvas.initStyle(ctx)
- this.initEvent()
- }
- getContext(contextType) {
- return contextType === '2d' ? this.ctx : null
- }
- setChart(chart) {
- this.chart = chart
- }
- addEventListener() {
- // noop
- }
- attachEvent() {
- // noop
- }
- detachEvent() {
- // noop
- }
- static initStyle(ctx) {
- const styles = ['fillStyle', 'strokeStyle', 'globalAlpha', 'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
- 'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
- ]
- styles.forEach((style) => {
- // eslint-disable-next-line accessor-pairs
- 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 = () => 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.mp.touches[0]
- this.chart._zr.handler.dispatch(name.ecName, {
- zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
- zrY: name.wxName === 'tap' ? touch.clientY : touch.y
- })
- }
- })
- }
- }
|