taro/src/components/basic/CircleRing.tsx

import { View } from "@tarojs/components";
import { useEffect } from "react";

let SvgXml;
if (process.env.TARO_ENV == 'rn') {
    SvgXml = require("react-native-svg").SvgXml
}

export default function CircleRing(props: {
    size: number,
    thickness: number,
    startAngle: number,
    progress: number,
    color: string,
    backgroundColor?: string
}) {
    const center = props.size / 2;
    const radius = (props.size - props.thickness) / 2;



    function detail() {
        const strokeWidth = props.thickness
        // 计算圆周长
        const circumference = 2 * Math.PI * radius;

        const startAngle = props.startAngle
        const progress = props.progress

        // 计算起始点的坐标
        const startX = props.size / 2 + radius * Math.cos((startAngle - 90) * (Math.PI / 180));
        const startY = props.size / 2 + radius * Math.sin((startAngle - 90) * (Math.PI / 180));

        // 计算结束点的坐标
        const endAngle = startAngle + (progress / 100) * 360;
        const endX = props.size / 2 + radius * Math.cos((endAngle - 90) * (Math.PI / 180));
        const endY = props.size / 2 + radius * Math.sin((endAngle - 90) * (Math.PI / 180));

        return `<svg width="${props.size}" height="${props.size}" xmlns="http://www.w3.org/2000/svg">
        <circle cx="${props.size / 2}" cy="${props.size / 2}" r="${radius}" stroke="${props.backgroundColor ?? 'transparent'}" stroke-width="${strokeWidth}" fill="none" />
        <path d="M ${startX} ${startY} A ${radius} ${radius} 0 ${progress > 50 ? 1 : 0} 1 ${endX} ${endY}" 
              stroke="${props.color}" stroke-width="${strokeWidth}" fill="none" stroke-linecap="round" />
      </svg>`
    }



    useEffect(() => {
    }, [])

    return <View style={{ width: props.size, height: props.size }}>{
        process.env.TARO_ENV == 'weapp' ? <mysvg src={detail()} colors={[]} /> :
            <SvgXml xml={detail()} />
    }</View>
}