当它超过100％时，径向进展
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当它超过100％时，径向进展相关的知识，希望对你有一定的参考价值。
我需要帮助调整我的进度径向代码，以便进度条停止在100％而不会超过导致间隙。
进步辐射的代码。任何在这里将不胜感激。这就是gap.qazxsw poi的样子
它看起来像渐变再次越过圆圈。
enter image description here
}
导出默认ProgressRadial;
如果进度不应超过100％，则将其限制在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>
);
}
：
calculateProgress这将影响内部文本和条形图。如果您只想限制条形，请在const progress = Math.min(value, 100) / 100;
中执行：
progressBarStyle以上是关于当它超过100％时，径向进展的主要内容，如果未能解决你的问题，请参考以下文章
Vaadin 7 在执行后台线程后不刷新 UI（仅当它需要超过 5 分钟时）