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

import { TimeFormatter } from "@/utils/time_format";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useRef } from "react";
import Svg, { Circle, Path } from 'react-native-svg';
import { useSelector } from "react-redux";

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

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

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 Component(props: {
    common: RingCommon; currentDot?: CurrentDot;
    realRing?: RealRing; targetRing?: TargetRing;
    breathAnimation?: boolean;
    bgRing: BgRing; canvasId?: string;
    ctx?: any; setCtx?: any;
    canvas?: any; setCanvas?: any;
    dotList?: Array<CurrentDot>;
    stageList?: Array<RealRing>;
}) {
    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; // 圆形进度条的线宽
    const timeObj = useSelector((state: any) => state.time);
    const user = useSelector((state: any) => state.user);

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

    function drawContent() {
        var time = new Date();
        // if (timeObj.status != 'WAIT_FOR_START' && timeObj && (timeObj.fast || timeObj.sleep)) {
        //     var timestamp = time.getTime()
        //     //判断逻辑
        //     if (timeObj.fast.real_start_time_zone || timeObj.sleep.real_start_time_zone) {
        //         timestamp = TimeFormatter.transferTimestamp(timestamp, timeObj.fast.real_start_time_zone ? timeObj.fast.real_start_time_zone : timeObj.sleep.real_start_time_zone)
        //         time = new Date(timestamp)
        //     }
        // }
        var seconds = time.getHours() * 3600 + time.getMinutes() * 60 + time.getSeconds();
        var arc = seconds / 86400 * 2 * Math.PI - Math.PI / 2.0;


        return <Svg width={(radius * 2 + lineWidth) + 6} height={(radius * 2 + lineWidth) + 6} fillOpacity={0}>
            <Circle
                cx={center}
                cy={center}
                r={radius}
                fillOpacity={0}
                stroke={props.bgRing.color}
                strokeWidth={strokeWidth}
                strokeLinecap="round"
            />
            {/* // 绘制target进度环
        if (props.targetRing) {
            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();
        } */}
            {
                props.targetRing && <Circle
                    cx={center}
                    cy={center}
                    r={radius}
                    fillOpacity={0}
                    stroke={props.targetRing!.color}
                    transform={`rotate(${props.targetRing!.startArc / (2 * Math.PI) * 360} ${center} ${center})`}
                    strokeDasharray={`${props.targetRing!.durationArc * radius},1000`}
                    strokeWidth={lineWidth}
                    strokeLinecap="round"
                />
            }
            {/* //绘制real进度环
        if (props.realRing) {
            if (props.realRing.durationArc <0.01) props.realRing.durationArc=0.01;
            ctx.beginPath();
            ctx.arc(center, center, radius, props.realRing!.startArc,
                props.realRing!.startArc + props.realRing!.durationArc);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = props.realRing!.color;
            ctx.lineCap = 'round'; // 设置为圆角
            ctx.stroke();
        } */}
            {
                props.realRing && <Circle
                    cx={center}
                    cy={center}
                    r={radius}
                    fillOpacity={0}
                    stroke={props.realRing!.color}
                    transform={`rotate(${props.realRing!.startArc / (2 * Math.PI) * 360} ${center} ${center})`}
                    strokeDasharray={`${props.realRing!.durationArc * radius},1000`}
                    strokeWidth={lineWidth}
                    strokeLinecap="round"
                />
            }
            {
                props.stageList && props.stageList.map((item) => {
                    return <Circle
                        cx={center}
                        cy={center}
                        r={radius}
                        fillOpacity={0}
                        stroke={item.color}
                        transform={`rotate(${item.startArc / (2 * Math.PI) * 360} ${center} ${center})`}
                        strokeDasharray={`${item.durationArc * radius},1000`}
                        strokeWidth={lineWidth}
                        strokeLinecap="round"
                    />

                })
            }
            {
                props.currentDot && <Circle
                    cx={center}
                    cy={center}
                    r={radius}
                    fillOpacity={0}
                    stroke={props.currentDot!.borderColor}
                    transform={`rotate(${arc / (2 * Math.PI) * 360} ${center} ${center})`}
                    strokeDasharray={`0,1000`}
                    strokeWidth={lineWidth + 4}
                    strokeLinecap="round"
                />
            }
            
            {
                props.currentDot && <Circle
                    cx={center}
                    cy={center}
                    r={radius}
                    fillOpacity={0}
                    stroke={props.currentDot!.color}
                    transform={`rotate(${arc / (2 * Math.PI) * 360} ${center} ${center})`}
                    strokeDasharray={`0,1000`}
                    strokeWidth={lineWidth}
                    strokeLinecap="round"
                />
            }
            {
                props.dotList && props.dotList.map(item => {
                    var time1 = item.timestamp ? new Date(item.timestamp) : new Date();
                    var seconds1 = time1.getHours() * 3600 + time1.getMinutes() * 60 + time1.getSeconds();
                    var arc1 = seconds1 / 86400 * 2 * Math.PI - Math.PI / 2.0;
                    return <Circle
                        cx={center}
                        cy={center}
                        r={radius}
                        fillOpacity={0}
                        stroke={item.borderColor}
                        transform={`rotate(${arc1 / (2 * Math.PI) * 360} ${center} ${center})`}
                        strokeDasharray={`0,1000`}
                        strokeWidth={lineWidth + 6}
                        strokeLinecap="round"
                    />
                })
            }
            {
                props.dotList && props.dotList.map(item => {
                    var time1 = item.timestamp ? new Date(item.timestamp) : new Date();
                    var seconds1 = time1.getHours() * 3600 + time1.getMinutes() * 60 + time1.getSeconds();
                    var arc1 = seconds1 / 86400 * 2 * Math.PI - Math.PI / 2.0;
                    return <Circle
                        cx={center}
                        cy={center}
                        r={radius}
                        fillOpacity={0}
                        stroke={item.color}
                        transform={`rotate(${arc1 / (2 * Math.PI) * 360} ${center} ${center})`}
                        strokeDasharray={`0,1000`}
                        strokeWidth={lineWidth}
                        strokeLinecap="round"
                    />
                })
            }
        </Svg>
    }

    return <Svg width={(radius * 2 + lineWidth) + 6} height={(radius * 2 + lineWidth) + 6} fillOpacity={0}>
        {
            drawContent()
        }
    </Svg>

    // return <View style={{ width: 100, height: 100, backgroundColor: 'pink' }}></View>
}