当超过 100% 时，进度呈径向差距

Question

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

渐进径向的代码。这里的任何内容都将受到赞赏。这是间隙的外观。在此处输入图像描述

看起来渐变又越过了圆圈。

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>
);
}

}

导出默认进度径向;

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))