我正在尝试制作一个带有虚线的圆形进度条。我以编程方式创建stroke-dasharray and stroke-dashoffset用百分比画一个圆。
我需要绘制虚线圆，而不是实心圆，如下所示：
我无法将实心圆更改为虚线圆。我是否遗漏了一些东西，或者我是否需要改变我的逻辑来绘制虚线圆圈？
https://jsfiddle.net/6mu97jyL/ https://jsfiddle.net/6mu97jyL/
class CircularProgressBar extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
// Size of the enclosing square
const sqSize = this.props.sqSize;
// SVG centers the stroke width on the radius, subtract out so circle fits in square
const radius = (this.props.sqSize - this.props.strokeWidth) / 2;
// Enclose cicle in a circumscribing square
const viewBox = `0 0 ${sqSize} ${sqSize}`;
// Arc length at 100% coverage is the circle circumference
const dashArray = radius * Math.PI * 2;
// Scale 100% coverage overlay with the actual percent
const dashOffset = dashArray - dashArray * this.props.percentage / 100;
return (
<svg
width={this.props.sqSize}
height={this.props.sqSize}
viewBox={viewBox}>
<circle
className="circle-background"
cx={this.props.sqSize / 2}
cy={this.props.sqSize / 2}
r={radius}
strokeWidth={`${this.props.strokeWidth}px`} />
<circle
className="circle-progress"
cx={this.props.sqSize / 2}
cy={this.props.sqSize / 2}
r={radius}
strokeWidth={`${this.props.strokeWidth}px`}
transform={`rotate(-90 ${this.props.sqSize / 2} ${this.props.sqSize / 2})`}
style={{
strokeDasharray: dashArray,
strokeDashoffset: dashOffset
}} />
</svg>
);
}
}
CircularProgressBar.defaultProps = {
sqSize: 200,
percentage: 25,
strokeWidth: 10
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
percentage: 25
};
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
handleChangeEvent(event) {
this.setState({
percentage: event.target.value
});
}
render() {
return (
<div>
<CircularProgressBar
strokeWidth="10"
sqSize="200"
percentage={this.state.percentage}/>
<div>
<input
id="progressInput"
type="range"
min="0"
max="100"
step="1"
value={this.state.percentage}
onChange={this.handleChangeEvent}/>
</div>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
#app {
margin-top: 40px;
margin-left: 50px;
}
#progressInput {
margin: 20px auto;
width: 30%;
}
.circle-background,
.circle-progress {
fill: none;
}
.circle-background {
stroke: #ddd;
}
.circle-progress {
stroke: #F99123;
stroke-linecap: round;
stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div class="container">
<div class="text-center" id="app">
</div>
</div>
不确定这是否在您正在寻找的范围内。
（下面是完整的片段/演示）
我不是这个主题的专家，所以可能还有另一种选择（比如两个具有不同样式的半圆） - 但这里基本上所做的是在实心圆的顶部放置另一个圆，并确保它具有相同的笔画颜色与页面相同。然后，这将掩盖后面圆圈的间隙（基本上隐藏圆圈的一部分）。
<circle
className="circle-dashes"
cx={this.props.sqSize / 2}
cy={this.props.sqSize / 2}
r={radius}
strokeWidth={`${this.props.strokeWidth}px`}
style={{
strokeDasharray: "5 10" // Adjust the spacing here
}} />
css:
.circle-dashes {
stroke: #FFF;
fill: none;
}
并删除
stroke-linecap: round;
stroke-linejoin: round;
一些小的调整可以满足您的需求，希望您能得到它！
如果您使用其他背景颜色查看应用程序，变化可能会更明显。
class CircularProgressBar extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
// Size of the enclosing square
const sqSize = this.props.sqSize;
// SVG centers the stroke width on the radius, subtract out so circle fits in square
const radius = (this.props.sqSize - this.props.strokeWidth) / 2;
// Enclose cicle in a circumscribing square
const viewBox = `0 0 ${sqSize} ${sqSize}`;
// Arc length at 100% coverage is the circle circumference
const dashArray = radius * Math.PI * 2;
// Scale 100% coverage overlay with the actual percent
const dashOffset = dashArray - dashArray * this.props.percentage / 100;
return (
<svg
width={this.props.sqSize}
height={this.props.sqSize}
viewBox={viewBox}>
<circle
className="circle-background"
cx={this.props.sqSize / 2}
cy={this.props.sqSize / 2}
r={radius}
strokeWidth={`${this.props.strokeWidth}px`} />
<circle
className="circle-progress"
cx={this.props.sqSize / 2}
cy={this.props.sqSize / 2}
r={radius}
strokeWidth={`${this.props.strokeWidth}px`}
// Start progress marker at 12 O'Clock
transform={`rotate(-90 ${this.props.sqSize / 2} ${this.props.sqSize / 2})`}
style={{
strokeDasharray: dashArray,
strokeDashoffset: dashOffset
}} />
<circle
className="circle-dashes"
cx={this.props.sqSize / 2}
cy={this.props.sqSize / 2}
r={radius}
strokeWidth={`${this.props.strokeWidth}px`}
style={{
strokeDasharray: "5 10"
}} />
</svg>
);
}
}
CircularProgressBar.defaultProps = {
sqSize: 200,
percentage: 25,
strokeWidth: 10
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
percentage: 25
};
this.handleChangeEvent = this.handleChangeEvent.bind(this);
}
handleChangeEvent(event) {
this.setState({
percentage: event.target.value
});
}
render() {
return (
<div>
<CircularProgressBar
strokeWidth="10"
sqSize="200"
percentage={this.state.percentage}/>
<div>
<input
id="progressInput"
type="range"
min="0"
max="100"
step="1"
value={this.state.percentage}
onChange={this.handleChangeEvent}/>
</div>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
#app {
margin-top: 40px;
margin-left: 50px;
}
#progressInput {
margin: 20px auto;
width: 30%;
}
.circle-background,
.circle-progress {
fill: none;
}
.circle-background {
stroke: #ddd;
}
.circle-dashes {
stroke: #fff;
fill: none;
}
.circle-progress {
stroke: #F99123;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="container">
<div class="text-center" id="app">
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
