当它超过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%时,径向进展的主要内容,如果未能解决你的问题,请参考以下文章

当它已经上升时,javascript可以减少html值吗?

当它已经可见时关闭键盘

径向面积生成器

Vaadin 7 在执行后台线程后不刷新 UI(仅当它需要超过 5 分钟时)

Actionscript 3,flexSDK,当它超过flash阶段时阻止鼠标滚轮滚动

当文件名超过 100 个字符时,moveItemAtURL 上的错误代码 514