标签：circumference ratio React PropTypes let 进度 props 组件 CircelProcess

效果图

css代码

.CircelProcess{
    position: relative;
    width: 100%;
    height: 100%;
}
.CircelProcess *{
    box-sizing: border-box;
}

.CircelProcess svg{
    transform: rotate(-90deg);
}

.ProcessCircle{
    transition: stroke-dashoffset 500ms cubic-bezier(0.99, 0.01, 0.62, 0.94);
}

js代码

import React from 'react'
import PropTypes from 'prop-types'
import './style.css'

class CircelProcess extends React.Component {
    static propTypes = {
        ratio: PropTypes.number,
        strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
        percent: PropTypes.number.isRequired
    }
    static defaultProps = {
        strokeColor: '#F9C97B',
        ratio: 0.1
    }
    constructor(props) {
        super(props)
        let {ratio} = props
        let  r = 50 /(1 + ratio)
        let circumference = Math.PI * 2 * r
        this.state = {
            strokeDashoffset: circumference
        }
    }
    componentWillUnmount() {
        this.mounted = false
    }
    componentDidMount() {
        this.mounted = true
        let { percent, ratio } = this.props
        let  r = 50 /(1 + ratio)
        let circumference = Math.PI * 2 * r
        let strokeDashoffset = circumference - circumference * percent / 100.0
        setTimeout(() => {
            if (this.mounted) {
                this.setState({
                    strokeDashoffset
                })
            }
        }, 300)
    }
    render() {
        let { ratio} = this.props
        let { strokeDashoffset } = this.state
        let  r = 50 /(1 + ratio)
        let strokeDasharray = Math.PI * 2 * r
        let strokeWidth = r * ratio
        return (
            <div className='CircelProcess'>
                <svg width='100%' height='100%'
                    viewBox='0 0 100 100'>
                    <circle
                        className='BackgroundCircle'
                        cx={50}
                        cy={50}
                        r={r}
                        strokeWidth={strokeWidth}
                        stroke='#D3D3D3'
                        strokeOpacity={0.2}
                        fill='none' />
                    <circle
                        className='ProcessCircle'
                        cx={50}
                        cy={50}
                        r={r}
                        strokeWidth={strokeWidth}
                        stroke='url(#strokecolor)'
                        // strokeLinejoin='round'
                        strokeLinecap='round'
                        strokeDasharray={strokeDasharray}
                        strokeDashoffset={strokeDashoffset}
                        fill='none' />
                    <defs>
                        <linearGradient id='strokecolor' x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stopColor={'#00B3BC'} />
                            <stop offset="100%" stopColor={'#89D87A'} />
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        )
    }
}

export default CircelProcess

实现思路：

1. 外层div作为组件容器，class设置宽、高为100%以自适应组件外层容器宽高，实现根据外容器宽、高变化自动变化；

<div className='CircelProcess'></div>

2.

标签：circumference,ratio,React,PropTypes,let,进度,props,组件,CircelProcess
来源： https://blog.csdn.net/Saladbobo/article/details/98080836

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。