1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| 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;
| }
|
| attachEvent() {
| // noop
| }
|
| detachEvent() {
| // noop
| }
|
| static initStyle(ctx) {
| const 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 = () => 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,
| });
| };
| });
| }
| }
|
|
