代码
import { ComponentClass } from 'react' import Taro, { Component } from '@tarojs/taro' import { View, Canvas,Text } from '@tarojs/components' import './progress.scss' type PageOwnProps = {} type PageState = {} type PageStateProps = { data: string color:string progress:SVGAnimatedNumberList } type PageDispatchProps = { show: () => void } type IProps = PageStateProps & PageDispatchProps & PageOwnProps interface RoundProgress { props: IProps; } let windowWidth // 可使用窗口宽度 let windowHeight // 可使用窗口高度 let ratio // 根据尺寸动态计算 1px换算成多少rpx class RoundProgress extends Component<{}, RoundProgress> { static defaultProps = { data: '心理资本', color:'#7D79F3', progress:0, } componentDidMount() { this.drawProgressbg(this.props.progress); } //绘制背景 drawProgressbg(step) { Taro.getSystemInfo({ success:res=>{ console.log(res); windowWidth=res.windowWidth windowHeight=res.windowHeight // 屏幕宽度 375px = 750rpx，1px=2rpx // 1px = （750 / 屏幕宽度）rpx； // 1rpx = （屏幕宽度 / 750）px; ratio= 750 / windowWidth } }) // console.log(windowWidth+'======'+windowHeight+'======ratio:'+(60/ratio)) // 使用 .createContext 获取绘图上下文 context const ctx = Taro.createCanvasContext('canvasProgressbg', this) ctx.setLineWidth(4);// 设置圆环的宽度 ctx.setStrokeStyle(this.props.color); // 设置圆环的颜色 ctx.setLineCap('butt') // 设置圆环端点的形状 ctx.beginPath();//开始一个新的路径 ctx.arc(69/ratio, 69/ratio, 60/ratio, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);//x,y,半径,开始,结束 ctx.stroke();//对当前路径进行描边 ctx.draw(); } render() { return ( <View className='progress_box'> <Canvas className="progress_bg" canvasId="canvasProgressbg"> </Canvas> <Canvas className="progress_canvas" canvasId="canvasProgress"> </Canvas> <View className="progress_text"> <Text className='progress_info'> {this.props.data}</Text> </View> </View> ) } } export default RoundProgress as ComponentClass<PageOwnProps, PageState>使用：
<RoundProgress className="progress" data={item.status} progress='0.3' color== '#7D79F3'></RoundProgress>