西藏巴青项目

wx-canvas.js 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. export default class WxCanvas {
  2. constructor(ctx, canvasId) {
  3. this.ctx = ctx
  4. this.canvasId = canvasId
  5. this.chart = null
  6. WxCanvas.initStyle(ctx)
  7. this.initEvent()
  8. }
  9. getContext(contextType) {
  10. return contextType === '2d' ? this.ctx : null
  11. }
  12. setChart(chart) {
  13. this.chart = chart
  14. }
  15. addEventListener() {
  16. // noop
  17. }
  18. attachEvent() {
  19. // noop
  20. }
  21. detachEvent() {
  22. // noop
  23. }
  24. static initStyle(ctx) {
  25. const styles = ['fillStyle', 'strokeStyle', 'globalAlpha', 'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
  26. 'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
  27. ]
  28. styles.forEach((style) => {
  29. // eslint-disable-next-line accessor-pairs
  30. Object.defineProperty(ctx, style, {
  31. set: (value) => {
  32. if (
  33. (style !== 'fillStyle' && style !== 'strokeStyle') || (value !== 'none' && value !== null)) {
  34. ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value)
  35. }
  36. }
  37. })
  38. })
  39. ctx.createRadialGradient = () => ctx.createCircularGradient(arguments)
  40. }
  41. initEvent() {
  42. this.event = {}
  43. const eventNames = [{
  44. wxName: 'touchStart',
  45. ecName: 'mousedown'
  46. }, {
  47. wxName: 'touchMove',
  48. ecName: 'mousemove'
  49. }, {
  50. wxName: 'touchEnd',
  51. ecName: 'mouseup'
  52. }, {
  53. wxName: 'touchEnd',
  54. ecName: 'click'
  55. }]
  56. eventNames.forEach((name) => {
  57. this.event[name.wxName] = (e) => {
  58. const touch = e.mp.touches[0]
  59. this.chart._zr.handler.dispatch(name.ecName, {
  60. zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
  61. zrY: name.wxName === 'tap' ? touch.clientY : touch.y
  62. })
  63. }
  64. })
  65. }
  66. }