Taro小程序自定义圆形进度条progress

代码

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 (
            
                  
                  
                
                     {this.props.data}
                
            
        )
    }
}

export default RoundProgress as ComponentClass

使用：