重构-环形进度条

约定不等于承诺〃 2021-07-24 20:19 463阅读 0赞

动画:
    	颜色变化、宽度增加
    
    圆环实现:
    	svg中两个圆,背景色都为none,通过设置边框为虚线,其中一个做背景,虚线的实线长度来实现圆环,实线还要设置stroke-linecap: round;形成圆角
    
    参数:
      percentage: PropTypes.number,		数值,0-100
      onSuccess: PropTypes.func,		当100%时触发,参数为状态
      size: PropTypes.string,		    圆环大小,直径(算边框)
      strokeWidth: PropTypes.string,	圆环宽度
      colors: PropTypes.array,          进度条渐变颜色数组,默认为color
      color: PropTypes.string,		    圆环颜色
      strokeColor:PropTypes.string,     进度条颜色
      fontSize: PropTypes.string,		字体大小
      fontColor:PropTypes.string,       字体颜色

效果图:  
![在这里插入图片描述][20201207234549247.png]  
![在这里插入图片描述][20201207235218595.png]

代码示例:  
使用:

import React,{ useState,useRef,useEffect,useCallback} from 'react'
    import Progress from './progress/progress'
    import CircleProgress from './circleProgress/circleProgress'
    
    function App(){ 
      let [value,setValue] =useState(0);
      const valf = useRef(null);
      valf.current = value;
    
    
      const _onClick = function ()
      { 
          setInterval(() => { 
        
                setValue(v=>v+1);      
          },1000)
    
      }
    
      
      
      
      const _onSuccess = function (state)
      { 
        console.log(state);
      }
    
    
      return(
    
        <div>
          <Progress colors={ ['#aaa', 'brown', 'blue', 'green']} percentage={ 99} onSuccess={ _onSuccess} show ></Progress>
          <br/>
          <br />
          
          <CircleProgress colors={ ['#aaa', 'brown', 'blue', 'green']}    percentage={ 100} onSuccess={ _onSuccess}></CircleProgress>
          <br/>
          <br />
          <button onClick={ _onClick}>开始</button>
    
    
        </div>
      )
    }
    
    export default App

circleProgress.jsx:

import React,{ useState,useEffect,useCallback,useMemo,useRef} from 'react'
    import PropTypes from 'prop-types'
    import './circleProgress.css'
    
    function App(props){ 
    
      const circleProgressf = useRef(null);
    
      useEffect(() => { 
    
        
        _styleHandler('size', props.size);
        _styleHandler('strokeWidth', props.strokeWidth);
        _styleHandler('color', props.color);
        _styleHandler('strokeColor', props.strokeColor);
        _styleHandler('fontSize', props.fontSize);
        _styleHandler('fontColor', props.fontColor);
    
      },[])
    
      useEffect(() => { 
        //设置进度条
        circleProgressf.current.style.setProperty('--width', _percentageHandler * _oneOfpercentage)
        
        _percentageHandler == 100 && props.onSuccess(true);
        
         
        (props.colors.length!=0) && _setColor(_percentageHandler)
    
      }, [props.percentage])
    
      //统一样式处理
      const _styleHandler = useCallback((key, value) => { 
        console.log(props.size)
        props[key] && circleProgressf.current.style.setProperty('--'+key, value)
        
      }, [])
    
      //传入数值处理
      const _percentageHandler = useMemo(() => { 
    
        
        return Math.floor(Math.max(0,Math.min(100,props.percentage)))
    
      }, [props.percentage])
      
      //将数值换算成圆环百分比,即1数值=npx;
      const _oneOfpercentage = useMemo(() => { 
        let r = parseFloat(props.size.substring(props.size.length - 2, -1)) / 2
        let strokeWidth = parseFloat(props.strokeWidth.substring(props.strokeWidth.length - 2, -1)) / 2
        let res = r - strokeWidth;
    
        let onePercent=(2*Math.PI * res)/100;
        
        return onePercent;
      }, [props.size])
      
      //坐标处理
      const _positionHandler = useMemo(() => { 
        let num = parseInt(props.size.substring(props.size.length - 2, -1)) / 2
        
        return num;
      },[props.size])
    
    
      //颜色变化处理
      const _setColor = useCallback((index) => { 
        let _index = Math.floor(100 / props.colors.length);
        _index = Math.floor(index / _index);
        (_index == props.colors.length) &&( _index = props.colors.length - 1);
    
    
        circleProgressf.current.style.setProperty('--strokeColor',props.colors[_index])
        
      },[props.colors])
    
      
      
    
    
      return(
    
        <div className='jf-circleProgress-container' ref={ circleProgressf}>
          <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
            { /* 圆心:容器宽度的一半 r:容器宽度一半-圆边框宽度 边框长度:2*pi*r 进度条:n*((pi*r^2)/100) */}
            <circle className='jf-circleProgress-outer'></circle>
            <circle className='jf-circleProgress-inner' transform={ `rotate(-90, ${ _positionHandler}, ${ _positionHandler})`}></circle>
            <text className='jf-circleProgress-number' x={ _positionHandler} y={ _positionHandler} >{  _percentageHandler }%</text>
          </svg>
        </div>
      )
    }
    
    export default React.memo(App);
    
    App.propTypes = { 
      percentage: PropTypes.number,
      onSuccess: PropTypes.func,
      size: PropTypes.string,
      strokeWidth: PropTypes.string,
      colors: PropTypes.array,
      color: PropTypes.string,
      strokeColor:PropTypes.string,
      fontSize: PropTypes.string,
      fontColor:PropTypes.string,
    
    }
    
    App.defaultProps = { 
      percentage: 0,
      size: '125px',
      strokeWidth:'7px',
      onSuccess: () => {  },
      colors:[]
      
    }

circleProgress.css:

.jf-circleProgress-container { 
      display: inline-block;
      margin-left: 20px;
    
      width: var(--size);
      height: var(--size);
    
      --size: 125px;
      --strokeWidth: 7px;
      --color: #ebeef5;
      --strokeColor: #13ce66;
      --width: 0;
      --fontSize: 16px;
      --fontColor: black;
    }
    .jf-circleProgress-outer { 
      cx: calc(var(--size) / 2);
      cy: calc(var(--size) / 2);
      r: calc((var(--size) / 2) - (var(--strokeWidth) / 2));
      fill: none;
      stroke: var(--color);
      stroke-width: var(--strokeWidth);
      stroke-linecap: round;
      stroke-dasharray: 10000, 0;
    }
    
    .jf-circleProgress-inner { 
      cx: calc(var(--size) / 2);
      cy: calc(var(--size) / 2);
      r: calc((var(--size) / 2) - (var(--strokeWidth) / 2));
      fill: none;
      stroke: var(--strokeColor);
      stroke-linecap: round;
      stroke-width: var(--strokeWidth);
      stroke-dasharray: var(--width), 10000;
      transition: stroke-dasharray 0.6s ease, stroke 1s;
    }
    
    .jf-circleProgress-number { 
      x: calc(var(--size) / 2);
      y: calc(var(--size) / 2);
      text-anchor: middle;
      font-size: var(--fontSize);
      fill: var(--fontColor);
    }

[20201207234549247.png]: /images/20210724/d80061524423482894679b1821480f7e.png
[20201207235218595.png]: /images/20210724/f4a9f7fce4a544e685e36e6f2970f881.png