---
id: "mnq3oenw-46haj6"
name: "环形进度条代码"
type: "reference"
project: "null"
tags: [poster, 海报, 进度条, 组件]
created: "2026-04-08"
---
# 环形进度条 (Progress Circle)

## 工具函数
`add_poster_progress_circle`

## 参数说明
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| cx | number | 必填 | 圆心 X 坐标 |
| cy | number | 必填 | 圆心 Y 坐标 |
| radius | number | 必填 | 圆环半径 |
| value | number | 必填 | 进度值 0-100 |
| strokeWidth | number | 10 | 环宽度 |
| trackColor | string | #dddddd | 轨道颜色 |
| fillColor | string | #4CAF50 | 进度颜色 |
| backgroundColor | string | - | 背景填充色 |
| showLabel | boolean | true | 是否显示百分比 |
| labelColor | string | #000000 | 标签颜色 |

## 使用示例

```javascript
// 1. 创建画布
create_poster_canvas({
  width: 600,
  height: 400,
  background: '#1a1a2e'
})

// 2. 添加环形进度条
add_poster_progress_circle({
  cx: 300,
  cy: 200,
  radius: 100,
  value: 75,
  strokeWidth: 15,
  trackColor: '#333355',
  fillColor: '#e94560',
  backgroundColor: '#1a1a2e',
  showLabel: true,
  labelColor: '#ffffff'
})

// 3. 导出图片
export_poster_canvas({
  filename: 'progress-circle-test',
  format: 'png',
  outputDir: './output'
})
```

## 效果
- 深色背景
- 红色环形进度条显示 75%
- 白色百分比标签居中
