关于javascript:svg实现reactrax圆环倒计时进度条组件code-snippet

5次阅读

共计 1379 个字符，预计需要花费 4 分钟才能阅读完成。

成果：

不必 svg 简直都是须要有额定的元素遮挡实现，但没有方法做到半透明圆环成果。纯 svg 画，加宽 path 的 stroke 宽度视觉上出现圆环。（是不是高中学过的三角函数快忘光了？）

以半径 32 的圆环为例，留神画笔定位基准落在核心地位，须要调整 viewbox 尺寸避免出现圆环显示不残缺。（拷贝自用）

import {createElement, useState, useEffect, useRef, useCallback} from 'rax';

interface IProps {
  time: number; // milliseconds
  style?: Rax.CSSProperties;
  onEnd?: () => void;}
export const CircleTimer = (props: IProps) => {const curT = useRef(0);
  const timer = useRef<number>();
  const [point, setPoint] = useState('32 0');

  useEffect(() => {return () => {if (timer.current) {clearTimeout(timer.current);
      }
    };
  }, []);

  const calPoint = useCallback(() => {if (curT.current >= props.time) {props.onEnd && props.onEnd();
      return;
    }

    timer.current = setTimeout(() => {
      curT.current += 50;
      const deg = (curT.current / props.time) * Math.PI * 2;
      const x = 32 + 32 * Math.sin(deg);
      const y = 32 - 32 * Math.cos(deg);
      if (curT.current < (1 / 2) * props.time) {setPoint(`${x} ${y}`);
      } else if (curT.current > (1 / 2) * props.time) {setPoint(`32 64 A 32 32 0 0 1 ${x} ${y}`);
      }
      calPoint();}, 50);
  }, [props.time, props.onEnd]);

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

  return (
    <svg
      width="60rpx"
      height="60rpx"
      style={props.style || {}}
      viewBox="-2 -2 68 68"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <path
        d={`M32 0 A 32 32 0 0 1 ${point}`}
        stroke="white"
        fill="transparent"
        stroke-width="4"
      />
    </svg>
  );
};

备注：