Compare commits

...

2 Commits

Author SHA1 Message Date
douboer
0664599937 Merge branch 'main' of ssh://biboer.cn:21174/gavin/lupin-demo 2026-01-22 20:01:41 +08:00
douboer
75e43312f1 update at 2026-01-22 20:01:26 2026-01-22 20:01:26 +08:00
3 changed files with 29 additions and 21 deletions

View File

@@ -21,7 +21,7 @@
"strokeWidth": 0.3, -- 扇区边界线宽度(像素) "strokeWidth": 0.3, -- 扇区边界线宽度(像素)
"strokeColor": "灰", -- 扇区边界线颜色(支持 colorPalettes "strokeColor": "灰", -- 扇区边界线颜色(支持 colorPalettes
"strokeOpacity": 0.15, -- 扇区边界线透明度 "strokeOpacity": 0.15, -- 扇区边界线透明度
"outerRadius": 500, -- 罗盘外半径,单位:像素 -- outerRadius 可选,仅在没有任何 layer 时作为兜底外半径使用
-- ======================================== -- ========================================
-- 主题配置 -- 主题配置

View File

@@ -25,6 +25,7 @@
8. **命名配色方案**:通过 theme.colorPalettes 定义可复用颜色 8. **命名配色方案**:通过 theme.colorPalettes 定义可复用颜色
9. **规律填色机制**:通过 num + interval 实现周期性着色 9. **规律填色机制**:通过 num + interval 实现周期性着色
10. **同组分割线控制**groupSplit 参数控制组内分割线显示 10. **同组分割线控制**groupSplit 参数控制组内分割线显示
11. **外半径兜底**:默认使用 layers 最大 rOuterouterRadius 仅作为无层配置时的兜底
--- ---
@@ -192,6 +193,7 @@ export interface LuopanConfig {
strokeWidth?: number; // 扇区边界线宽度 strokeWidth?: number; // 扇区边界线宽度
strokeColor?: string; // 扇区边界线颜色(支持主题色) strokeColor?: string; // 扇区边界线颜色(支持主题色)
strokeOpacity?: number; // 扇区边界线透明度 strokeOpacity?: number; // 扇区边界线透明度
outerRadius?: number; // 可选兜底外半径,默认使用 layers 最大 rOuter
theme: ThemeConfig; theme: ThemeConfig;
layers: LayerConfig[]; // 扇区层 + 中心图标层 + 刻度环层 layers: LayerConfig[]; // 扇区层 + 中心图标层 + 刻度环层
} }

View File

@@ -26,12 +26,12 @@
| strokeWidth | number | 否 | 扇区边界线宽度(像素),覆盖默认值 | 0.3 | | strokeWidth | number | 否 | 扇区边界线宽度(像素),覆盖默认值 | 0.3 |
| strokeColor | string | 否 | 扇区边界线颜色(支持十六进制或 colorPalettes 名称) | "#1f2937" | | strokeColor | string | 否 | 扇区边界线颜色(支持十六进制或 colorPalettes 名称) | "#1f2937" |
| strokeOpacity | number | 否 | 扇区边界线透明度0.0-1.0 | 0.15 | | strokeOpacity | number | 否 | 扇区边界线透明度0.0-1.0 | 0.15 |
| outerRadius | number | | 罗盘外半径,单位:像素(去掉该参数,自动计算最大半径 | 500 | | outerRadius | number | | 可选兜底外半径,未提供时使用 layers 中最大 rOuter含 degreeRing | 500 |
| theme | object | 是 | 主题配置对象包含colorPalettes命名配色方案 | 见下方theme说明 | | theme | object | 是 | 主题配置对象包含colorPalettes命名配色方案 | 见下方theme说明 |
| centerIcon | object | 否 | 中心图标配置 | 见下方centerIcon说明 |
| degreeRing | object | 否 | 360度刻度环配置 | 见下方degreeRing说明 |
| layers | array | 是 | 层配置数组,从内向外定义每一层 | 见下方layers说明 | | layers | array | 是 | 层配置数组,从内向外定义每一层 | 见下方layers说明 |
说明centerIcon 与 degreeRing 通过 layers 中的 type=centerIcon / degreeRing 配置。
**theme对象参数** **theme对象参数**
| 参数名 | 类型 | 必填 | 说明 | 示例 | | 参数名 | 类型 | 必填 | 说明 | 示例 |
|--------|------|------|------|------| |--------|------|------|------|------|
@@ -183,10 +183,13 @@
-- ======================================== -- ========================================
-- 中心图标配置 (Center Icon Configuration) -- 中心图标配置 (Center Icon Configuration)
-- ======================================== -- ========================================
"centerIcon": { {
"rIcon": 50, -- 图标半径,单位:像素 "type": "centerIcon",
"opacity": 0.8, -- 图标透明度0.0-1.00为完全透明1为完全不透明 "centerIcon": {
"name": "centericon.svg" -- SVG图标文件名路径固定为 src/assets/icons/ 目录 "rIcon": 50, -- 图标半径,单位:像素
"opacity": 0.8, -- 图标透明度0.0-1.00为完全透明1为完全不透明
"name": "centericon.svg" -- SVG图标文件名路径固定为 src/assets/icons/ 目录
}
} }
### 360度刻度环配置参数 ### 360度刻度环配置参数
@@ -199,17 +202,20 @@
-- ======================================== -- ========================================
-- 360度刻度环配置 (360 Degree Scale Ring) -- 360度刻度环配置 (360 Degree Scale Ring)
-- ======================================== -- ========================================
"degreeRing": { {
"rInner": 350, -- 刻度环内半径 "type": "degreeRing",
"rOuter": 380, -- 刻度环外半径 "degreeRing": {
"showDegree": 1, -- 是否显示度数0=不显示1=显示(按 10° 间隔) "rInner": 350, -- 刻度环内半径
"mode": "both", -- 刻度线模式:"inner"在rInner外侧、"outer"在rOuter内侧、"both"(两侧都有,度数居中) "rOuter": 380, -- 刻度环外半径
"opacity": 0.3, -- 圆环透明度0.0-1.0设置为0可以只显示刻度而不显示圆圈 "showDegree": 1, -- 是否显示度数0=不显示1=显示(按 10° 间隔
"tickLength": 6, -- 刻度线长度,单位:像素。 "mode": "both", -- 刻度线模式:"inner"在rInner外侧、"outer"在rOuter内侧、"both"(两侧都有,度数居中)
"tickLengthStep“: 1, -- 刻度线长度差1表示minorTick比majorTick短1px microTick比minorTick短1px。0表示majorTick,minorTick,minorTick长度相同。 "opacity": 0.3, -- 圆环透明度0.0-1.0设置为0可以只显示刻度而不显示圆圈
"majorTick": 10, -- 刻度间隔(度),如 10 表示每 10° 一个主刻度 "tickLength": 6, -- 刻度线长度,单位:像素。
"minorTick": 5, -- 刻度间隔(度),如 2 表示每 2° 一个次刻度 "tickLengthStep“: 1, -- 刻度线长度差1表示minorTick比majorTick短1px microTick比minorTick短1px。0表示majorTick,minorTick,minorTick长度相同。
"microTick": 1, -- 刻度间隔(度),如 1 表示每 1° 一个刻度 "majorTick": 10, -- 刻度间隔(度),如 10 表示每 10° 一个刻度
"tickColor": "#000000",-- 刻度线颜色 "minorTick": 5, -- 刻度间隔(度),如 2 表示每 2° 一个次刻度
"ringColor": "#000000" -- 圆环颜色 "microTick": 1, -- 微刻度间隔(度),如 1 表示每 1° 一个微刻度
"tickColor": "#000000",-- 刻度线颜色
"ringColor": "#000000" -- 圆环颜色
}
} }