diff --git a/detail-design.md b/detail-design.md index 658d5e8..e71d74c 100644 --- a/detail-design.md +++ b/detail-design.md @@ -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. 组件架构