From 75e43312f192c182caa023dbb1ee5108f7d21af0 Mon Sep 17 00:00:00 2001 From: douboer Date: Thu, 22 Jan 2026 20:01:26 +0800 Subject: [PATCH] update at 2026-01-22 20:01:26 --- public/demo.json.conf | 2 +- refactor-plan.md | 2 ++ todolist.md | 46 ++++++++++++++++++++++++------------------- 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/public/demo.json.conf b/public/demo.json.conf index 7ded500..9d43bec 100644 --- a/public/demo.json.conf +++ b/public/demo.json.conf @@ -21,7 +21,7 @@ "strokeWidth": 0.3, -- 扇区边界线宽度（像素） "strokeColor": "灰", -- 扇区边界线颜色（支持 colorPalettes） "strokeOpacity": 0.15, -- 扇区边界线透明度 - "outerRadius": 500, -- 罗盘外半径，单位：像素 + -- outerRadius 可选，仅在没有任何 layer 时作为兜底外半径使用 -- ======================================== -- 主题配置 diff --git a/refactor-plan.md b/refactor-plan.md index f6acdac..ffecd20 100644 --- a/refactor-plan.md +++ b/refactor-plan.md @@ -25,6 +25,7 @@ 8. **命名配色方案**：通过 theme.colorPalettes 定义可复用颜色 9. **规律填色机制**：通过 num + interval 实现周期性着色 10. **同组分割线控制**：groupSplit 参数控制组内分割线显示 +11. **外半径兜底**：默认使用 layers 最大 rOuter，outerRadius 仅作为无层配置时的兜底 --- @@ -192,6 +193,7 @@ export interface LuopanConfig { strokeWidth?: number; // 扇区边界线宽度 strokeColor?: string; // 扇区边界线颜色（支持主题色） strokeOpacity?: number; // 扇区边界线透明度 + outerRadius?: number; // 可选兜底外半径，默认使用 layers 最大 rOuter theme: ThemeConfig; layers: LayerConfig[]; // 扇区层 + 中心图标层 + 刻度环层 } diff --git a/todolist.md b/todolist.md index 805ff5c..2a5be6e 100644 --- a/todolist.md +++ b/todolist.md @@ -26,12 +26,12 @@ | strokeWidth | number | 否 | 扇区边界线宽度（像素），覆盖默认值 | 0.3 | | strokeColor | string | 否 | 扇区边界线颜色（支持十六进制或 colorPalettes 名称） | "#1f2937" | | strokeOpacity | number | 否 | 扇区边界线透明度（0.0-1.0） | 0.15 | - | outerRadius | number | 是 | 罗盘外半径，单位：像素（去掉该参数，自动计算最大半径） | 500 | + | outerRadius | number | 否 | 可选兜底外半径，未提供时使用 layers 中最大 rOuter（含 degreeRing） | 500 | | theme | object | 是 | 主题配置对象，包含colorPalettes命名配色方案 | 见下方theme说明 | - | centerIcon | object | 否 | 中心图标配置 | 见下方centerIcon说明 | - | degreeRing | object | 否 | 360度刻度环配置 | 见下方degreeRing说明 | | layers | array | 是 | 层配置数组，从内向外定义每一层 | 见下方layers说明 | + 说明：centerIcon 与 degreeRing 通过 layers 中的 type=centerIcon / degreeRing 配置。 + **theme对象参数：** | 参数名 | 类型 | 必填 | 说明 | 示例 | |--------|------|------|------|------| @@ -183,10 +183,13 @@ -- ======================================== -- 中心图标配置 (Center Icon Configuration) -- ======================================== - "centerIcon": { - "rIcon": 50, -- 图标半径，单位：像素 - "opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明） - "name": "centericon.svg" -- SVG图标文件名，路径固定为 src/assets/icons/ 目录 + { + "type": "centerIcon", + "centerIcon": { + "rIcon": 50, -- 图标半径，单位：像素 + "opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明） + "name": "centericon.svg" -- SVG图标文件名，路径固定为 src/assets/icons/ 目录 + } } ### 360度刻度环配置参数： @@ -199,17 +202,20 @@ -- ======================================== -- 360度刻度环配置 (360 Degree Scale Ring) -- ======================================== - "degreeRing": { - "rInner": 350, -- 刻度环内半径 - "rOuter": 380, -- 刻度环外半径 - "showDegree": 1, -- 是否显示度数：0=不显示，1=显示（按 10° 间隔） - "mode": "both", -- 刻度线模式："inner"（在rInner外侧）、"outer"（在rOuter内侧）、"both"（两侧都有，度数居中） - "opacity": 0.3, -- 圆环透明度（0.0-1.0，设置为0可以只显示刻度而不显示圆圈） - "tickLength": 6, -- 刻度线长度，单位：像素。 - "tickLengthStep“: 1, -- 刻度线长度差，1表示minorTick比majorTick短1px， microTick比minorTick短1px。0表示majorTick,minorTick,minorTick长度相同。 - "majorTick": 10, -- 主刻度间隔（度），如 10 表示每 10° 一个主刻度 - "minorTick": 5, -- 次刻度间隔（度），如 2 表示每 2° 一个次刻度 - "microTick": 1, -- 微刻度间隔（度），如 1 表示每 1° 一个微刻度 - "tickColor": "#000000",-- 刻度线颜色 - "ringColor": "#000000" -- 圆环颜色 + { + "type": "degreeRing", + "degreeRing": { + "rInner": 350, -- 刻度环内半径 + "rOuter": 380, -- 刻度环外半径 + "showDegree": 1, -- 是否显示度数：0=不显示，1=显示（按 10° 间隔） + "mode": "both", -- 刻度线模式："inner"（在rInner外侧）、"outer"（在rOuter内侧）、"both"（两侧都有，度数居中） + "opacity": 0.3, -- 圆环透明度（0.0-1.0，设置为0可以只显示刻度而不显示圆圈） + "tickLength": 6, -- 刻度线长度，单位：像素。 + "tickLengthStep“: 1, -- 刻度线长度差，1表示minorTick比majorTick短1px， microTick比minorTick短1px。0表示majorTick,minorTick,minorTick长度相同。 + "majorTick": 10, -- 主刻度间隔（度），如 10 表示每 10° 一个主刻度 + "minorTick": 5, -- 次刻度间隔（度），如 2 表示每 2° 一个次刻度 + "microTick": 1, -- 微刻度间隔（度），如 1 表示每 1° 一个微刻度 + "tickColor": "#000000",-- 刻度线颜色 + "ringColor": "#000000" -- 圆环颜色 + } }