taro/src/features/trackTimeDuration/components/Rings.tsx

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

export type RingCommon = {
    useCase: string;
    status: string;
    isFast?: boolean;
    radius: number;
    lineWidth: number;
}

export type CurrentDot = {
    color: string;
    lineWidth: number;
    borderColor: string;
}

export type RealRing = {
    color: string;
    startArc: number;
    durationArc: number;
}

export type TargetRing = {
    color: string;
    startArc: number;
    durationArc: number;
}

export type BgRing = {
    color: string;
}

export default function Rings(props: {
    common: RingCommon; currentDot?: CurrentDot;
    realRing?: RealRing; targetRing?: TargetRing; bgRing: BgRing; canvasId?: string;
}) {
    const progress = 0.85
    const r = props.common.radius
    const strokeWidth = props.common.lineWidth;
    // 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) => {
            if (res[0] == null) return;
            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.clearRect(0, 0, radius * 2, radius * 2); // 清除画布

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

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

            // 绘制target进度圆
            if (props.common.useCase == 'ChooseScenario') {
                ctx.beginPath();
                ctx.arc(center, center, radius, props.targetRing!.startArc,
                    props.targetRing!.startArc + props.targetRing!.durationArc);
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = props.targetRing!.color;
                ctx.lineCap = 'round'; // 设置为圆角
                ctx.stroke();
            }

            //绘制current_dot点
            if (props.common.useCase == 'Clock'){
                var time = new Date();
                var seconds = time.getHours()*3600+time.getMinutes()*60+time.getSeconds();
                var arc = seconds/86400*2*Math.PI-Math.PI/2.0;
                ctx.beginPath();
                ctx.arc(center, center, radius, arc,
                    arc+0.001);
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = props.currentDot!.borderColor;
                ctx.lineCap = 'round'; // 设置为圆角
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(center, center, radius, arc,
                    arc+0.001);
                ctx.lineWidth = lineWidth-2;
                ctx.strokeStyle = props.currentDot!.color;
                ctx.lineCap = 'round'; // 设置为圆角
                ctx.stroke();
            }


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

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

}