taro/src/components/view/Rings.weapp.tsx

import { Canvas } from "@tarojs/components";
import Taro, { useDidShow, useReady } from "@tarojs/taro";
import { useEffect, useRef } from "react";

export default function Rings(props: { strokeWidth: number; radius: number; color: string; canvasId?: string;bgColor?:string }) {
    const progress = 0.85
    const r = props.radius || 80
    const strokeWidth = props.strokeWidth || 10;
    const color = props.color || 'orange'
    const canvasRef = useRef(null);
    const canvasId = props.canvasId ? 'canvas_' + props.canvasId : 'progress-canvas';
    const dpr = Taro.getSystemInfoSync().pixelRatio; // 获取设备的像素比
    const radius = r; // 圆形进度条的半径
    const lineWidth = strokeWidth; // 圆形进度条的线宽

    useDidShow(() => {
        // drawCircle()
    })

    useReady(() => {
        drawCircle()

    })

    function drawCircle() {
        const query = Taro.createSelectorQuery();
        query.select(`.${canvasId}`).fields({ node: true, size: true });
        query.exec((res) => {
            const _canvas = res[0].node;
            _canvas.width = res[0].width * dpr;
            _canvas.height = res[0].height * dpr;
            const ctx = _canvas.getContext('2d');
            // const ctx = Taro.createCanvasContext(canvasId);


            const center = radius + lineWidth / 2; // 圆心坐标

            // 设置画布尺寸
            ctx.scale(dpr, dpr);

            // 绘制背景圆
            ctx.beginPath();
            ctx.arc(center, center, radius, 0, 2 * Math.PI);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = 'lightgray';
            ctx.lineCap = 'round'; // 设置为圆角
            ctx.stroke();

            // 绘制进度圆
            ctx.beginPath();
            ctx.arc(center, center, radius, -Math.PI / 2 + 1, (2 * Math.PI * progress) - Math.PI / 2);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = color;
            ctx.lineCap = 'round'; // 设置为圆角
            ctx.stroke();

            // ctx.draw();
        });
    }

    useEffect(() => {
        // const ctx = Taro.createCanvasContext(canvasId);



        // const center = radius + lineWidth / 2; // 圆心坐标

        // // 设置画布尺寸
        // ctx.scale(1 / dpr, 1 / dpr);

        // // 绘制背景圆
        // ctx.beginPath();
        // ctx.arc(center, center, radius, 0, 2 * Math.PI);
        // ctx.setLineWidth(lineWidth);
        // ctx.setStrokeStyle('lightgray');
        // ctx.setLineCap('round'); // 设置为圆角
        // ctx.stroke();

        // // 绘制进度圆
        // ctx.beginPath();
        // ctx.arc(center, center, radius, -Math.PI / 2 + 1, (2 * Math.PI * progress) - Math.PI / 2);
        // ctx.setLineWidth(lineWidth);
        // ctx.setStrokeStyle(color);
        // ctx.setLineCap('round'); // 设置为圆角
        // ctx.stroke();

        // ctx.draw();
    }, [progress]);
    return <Canvas canvasId={canvasId} id={canvasId} className={canvasId} type="2d" style={{ width: (radius * 2 + lineWidth), height: (radius * 2 + lineWidth), zIndex: 0 }} ref={canvasRef} />

}