1、安装@antv/f2
npm install @antv/f2 --save
2、封装Canvas组件
F2Canvas.js
import React from 'react'
import Taro from '@tarojs/taro'
import { Canvas } from '@tarojs/components'
/**
|--------------------------------------------------
| @Drawer
| #Component
| 封装的canvas
|--------------------------------------------------
*/
interface Config {
context: CanvasRenderingContext2D
width: number
height: number
pixelRatio: number
}
export type F2CanvasProps = {
id: string
className?: string
style: string
onInit: (conifg: Config) => any
}
function wrapEvent(e: any) {
if (!e) return
if (!e.preventDefault) {
e.preventDefault = function () {}
}
return e
}
export default class F2Canvas extends React.Component<F2CanvasProps> {
canvasEl: any
chart: any
componentWillMount() {
setTimeout(() => {
this.onWxCanvas()
}, 100)
}
/