Question

我需要帮助来调整我的进度径向代码，以便进度条在100％处停止并且不会超过而导致间隙。

progres径向代码。这里的任何东西都会被感激。这就是差距。enter image description here

看起来梯度再次在圆上移动。

class ProgressRadial extends Component {
static propTypes = {
    /** Width of the stroke */
    strokeWidth: PropTypes.number,
    /** Diameter of progress circle */
    diameter: PropTypes.number,
    /** Percentage of 100 that is complete */
    progress: PropTypes.number.isRequired,
    /** Optional label for the percentage */
    label: PropTypes.string,
    /** Color palette to apply */
    color: PropTypes.oneOf([
        'blue',
        'teal'
    ]),
    /** Flag to determine if the gradient effect should be applied or not */
    gradient: PropTypes.bool,
    /** Flag to determine if the glow effect should be applied or not */
    glow: PropTypes.bool,
    /** Flag to determine if the progress should animate on load */
    animated: PropTypes.bool
}

static defaultProps = {
    strokeWidth: 6,
    diameter: 150,
    progress: 0,
    label: '',
    color: 'blue',
    gradient: true,
    glow: false,
    animated: false
}

constructor(props) {
    super(props);

    this.state = {
        mounted: false
    };
}

componentDidMount = () => {
    window.requestAnimationFrame(() => {
        this.setState({
            mounted: true
        });
    });
}

componentWillUnmount = () => {
    window.requestAnimationFrame(() => {
        this.setState({
            mounted: false
        });
    });
}

/** Circumference =  Pi times diameter.  We subtact half a stroke width on either side to see where the circle center is */
getCircumference() {
    return Math.PI * (this.props.diameter - this.props.strokeWidth);
}

calculateProgress(value) {
    const circumference = this.getCircumference();
    const progress = value / 100;

    return circumference * (1 - progress);
}

render() {
    const {
        strokeWidth,
        diameter,
        label,
        className,
        progress,
        children,
        color,
        gradient,
        glow,
        animated
    } = this.props;

    const center = (diameter / 2);
    const radius = (center - (strokeWidth / 2));

    const progressStyle = {
        width: `${diameter}px`,
        height: `${diameter}px`
    };

    const progressBarStyle = {
        strokeDasharray: this.getCircumference(),
        strokeDashoffset: (!this.state.mounted && animated) ? this.getCircumference() : this.calculateProgress(progress)
    };

    const progressClasses = (color)
        ? classNames('progress-radial', `progress-radial--${color}`, className)
        : classNames('progress-radial', className);

    const progressContents = (!children && label) ? (
        <React.Fragment>
            <div aria-hidden="true" className="progress-radial__display-percent">{`${progress}%`}</div>
            <div aria-hidden="true" className="progress-radial__display-complete">{label}</div>
        </React.Fragment>
    ) : (
        children
    );

    return (
        <div tabIndex="-1" className={progressClasses} style={progressStyle} role="progressbar" aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100" aria-valuetext={`${progress}% ${label}`} >
            <svg className="progress-radial__svg" width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`} style={{'overflow': 'visible'}}>
                <defs>
                    {glow &&
                        <filter id="progress-radial__glow">
                            <feGaussianBlur stdDeviation="1.5" result="coloredBlur" />
                            <feMerge>
                                <feMergeNode in="coloredBlur" />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                    }
                    {gradient &&
                        <linearGradient id="progress-radial__gradient" gradientTransform="rotate(90)">
                            <stop className="progress-radial__gradient-stop--1" offset="0%" stopColor="currentColor"/>
                            <stop className="progress-radial__gradient-stop--2" offset="100%" stopColor="currentColor"/>
                        </linearGradient>
                    }
                </defs>
                <circle className="progress-radial__meter" cx={center} cy={center} r={radius} strokeWidth={strokeWidth} />
                <circle className="progress-radial__value"
                    style={progressBarStyle}
                    stroke={gradient ? 'url(#progress-radial__gradient)' : 'currentColor'}
                    cx={center} cy={center} r={radius}
                    strokeWidth={strokeWidth}
                    filter={glow ? 'url(#progress-radial__glow)' : ''}
                />
            </svg>
            <div className="progress-radial__container">
                {progressContents}
            </div>
        </div>
    );
}

}

导出默认的ProgressRadial;

Answer 1

如果进度不应该超过100％，则将进度限制为100％。

在calculateProgress中：

const progress = Math.min(value, 100) / 100;

这将影响内部文本以及条形图。如果您只想限制该栏，请在progressBarStyle中进行操作：

strokeDashoffset: (!this.state.mounted && animated) ? this.getCircumference() : this.calculateProgress(Math.min(progress, 100))

进度差距超过100％时

1 个答案: