抖音b端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

tt-canvas.js 2.1 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. export default class WxCanvas {
  2. constructor(ctx, canvasId) {
  3. this.ctx = ctx;
  4. this.canvasId = canvasId;
  5. this.chart = null;
  6. // this._initCanvas(zrender, ctx);
  7. this._initStyle(ctx);
  8. this._initEvent();
  9. }
  10. getContext(contextType) {
  11. if (contextType === '2d') {
  12. return this.ctx;
  13. }
  14. }
  15. // canvasToTempFilePath(opt) {
  16. // if (!opt.canvasId) {
  17. // opt.canvasId = this.canvasId;
  18. // }
  19. setChart(chart) {
  20. this.chart = chart;
  21. }
  22. attachEvent () {
  23. // noop
  24. }
  25. detachEvent() {
  26. // noop
  27. }
  28. _initCanvas(zrender, ctx) {
  29. zrender.util.getContext = function () {
  30. return ctx;
  31. };
  32. zrender.util.$override('measureText', function (text, font) {
  33. ctx.font = font || '12px sans-serif';
  34. return ctx.measureText(text);
  35. });
  36. }
  37. _initStyle(ctx) {
  38. var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
  39. 'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
  40. 'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
  41. styles.forEach(style => {
  42. Object.defineProperty(ctx, style, {
  43. set: value => {
  44. if (style !== 'fillStyle' && style !== 'strokeStyle'
  45. || value !== 'none' && value !== null
  46. ) {
  47. ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
  48. }
  49. }
  50. });
  51. });
  52. ctx.createRadialGradient = () => {
  53. return ctx.createCircularGradient(arguments);
  54. };
  55. }
  56. _initEvent() {
  57. this.event = {};
  58. const eventNames = [{
  59. wxName: 'touchStart',
  60. ecName: 'mousedown'
  61. }, {
  62. wxName: 'touchMove',
  63. ecName: 'mousemove'
  64. }, {
  65. wxName: 'touchEnd',
  66. ecName: 'mouseup'
  67. }, {
  68. wxName: 'touchEnd',
  69. ecName: 'click'
  70. }];
  71. eventNames.forEach(name => {
  72. this.event[name.wxName] = e => {
  73. const touch = e.touches[0];
  74. this.chart._zr.handler.dispatch(name.ecName, {
  75. zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
  76. zrY: name.wxName === 'tap' ? touch.clientY : touch.y
  77. });
  78. };
  79. });
  80. }
  81. }