index.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import F2 from '@antv/f2';
  2. import { my as my$1 } from '@antv/f2-context';
  3. function wrapEvent(e) {
  4. if (!e) return;
  5. if (!e.preventDefault) {
  6. e.preventDefault = function() {};
  7. }
  8. return e;
  9. }
  10. Component({
  11. // mixins: [],
  12. // data: {},
  13. props: {
  14. onInit: () => {}
  15. },
  16. didMount() {
  17. const id = `f2-canvas-${this.$id}`;
  18. const myCtx = my.createCanvasContext(id);
  19. const context = my$1(myCtx);
  20. const query = my.createSelectorQuery();
  21. query
  22. .select(`#${id}`)
  23. .boundingClientRect()
  24. .exec(res => {
  25. // 获取画布实际宽高
  26. const { width, height } = res[0];
  27. const pixelRatio = my.getSystemInfoSync().pixelRatio;
  28. // 高清解决方案
  29. this.setData({
  30. id,
  31. width: width * pixelRatio,
  32. height: height * pixelRatio
  33. }, () => {
  34. const chart = this.props.onInit(F2, { context, width, height, pixelRatio });
  35. if (chart) {
  36. this.chart = chart;
  37. this.canvasEl = chart.get('el');
  38. }
  39. });
  40. });
  41. },
  42. // didUpdate() {},
  43. // didUnmount() {},
  44. methods: {
  45. touchStart(e) {
  46. const canvasEl = this.canvasEl;
  47. if (!canvasEl) {
  48. return;
  49. }
  50. canvasEl.dispatchEvent('touchstart', wrapEvent(e));
  51. },
  52. touchMove(e) {
  53. const canvasEl = this.canvasEl;
  54. if (!canvasEl) {
  55. return;
  56. }
  57. canvasEl.dispatchEvent('touchmove', wrapEvent(e));
  58. },
  59. touchEnd(e) {
  60. const canvasEl = this.canvasEl;
  61. if (!canvasEl) {
  62. return;
  63. }
  64. canvasEl.dispatchEvent('touchend', wrapEvent(e));
  65. }
  66. }
  67. });