update at 2026-01-28 16:48:40
This commit is contained in:
@@ -272,23 +272,17 @@ const label = '测'.repeat(textLength);
|
||||
|
||||
## 6. 颜色生成策略
|
||||
|
||||
使用 HSL 颜色空间实现层次分明的配色:
|
||||
当前实现以主题色板为核心:`colorRef` 优先解析为主题色名,未命中时退回原值。
|
||||
|
||||
```typescript
|
||||
function generateSectorColor(
|
||||
layerIndex: number,
|
||||
pieIndex: number,
|
||||
totalPies: number = 24
|
||||
): string {
|
||||
const hue = (pieIndex * 360) / totalPies; // 色相均匀分布
|
||||
const light = 78 - layerIndex * 10; // 亮度由内向外递减
|
||||
return `hsl(${hue} 70% ${light}%)`;
|
||||
}
|
||||
```
|
||||
**扇区填色优先级**:
|
||||
1. 扇区级 `colorRef`
|
||||
2. 层级规律填色(`layer.colorRef` + `num/interval/patternOffset`)
|
||||
3. 全局 `background`
|
||||
|
||||
**效果**:
|
||||
- 相邻扇区色相不同,易于区分
|
||||
- 内层较亮,外层较暗,突出层次
|
||||
**刻度环颜色**:
|
||||
- `degreeRing.colorRef` 存在时,渲染环形背景填充(作为刻度环背景)。
|
||||
- `tickColor` / `ringColor` 显式提供则优先使用;未提供时根据背景计算对比色。
|
||||
- `opacity` 同时作用于环形背景和内外圆环描边。
|
||||
|
||||
## 7. 组件架构
|
||||
|
||||
|
||||
Reference in New Issue
Block a user