From a8089766ef5d0103fe856d1d17a5532d42003fca Mon Sep 17 00:00:00 2001 From: douboer Date: Wed, 21 Jan 2026 19:04:10 +0800 Subject: [PATCH] update at 2026-01-21 19:04:10 --- src/assets/{ => icons}/centericon.svg | 0 todolist.md | 72 ++++++++++++++++++++++++++- 2 files changed, 70 insertions(+), 2 deletions(-) rename src/assets/{ => icons}/centericon.svg (100%) diff --git a/src/assets/centericon.svg b/src/assets/icons/centericon.svg similarity index 100% rename from src/assets/centericon.svg rename to src/assets/icons/centericon.svg diff --git a/todolist.md b/todolist.md index 422c10f..1393be7 100644 --- a/todolist.md +++ b/todolist.md @@ -3,7 +3,7 @@ ## 当前实现优化点 1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。优化为统一使用json配置来实现罗盘绘制。 2. 扇区的内容可以是是文字或者SVG图标，如为SVG，sectors的content中指定svg文件名，SVG布局规则同文字。 -3. 扇区内容支持多文本单元：使用"|"分隔多个文本（如"甲乙|子|丙丁"），角度分配采用智能策略： +3. 扇区内容支持多文本单元：使用"|"分隔多个文本（如"甲乙|子|丙丁"），角度分配采用智能策略，全局配置LAYOUT_RATIO_PRESETS： - 1个单元：100% - 2个单元：平均 [0.5, 0.5] - 3个单元：中间大 [0.25, 0.5, 0.25] @@ -14,7 +14,75 @@ 5. Json中不用关注是第几层，按配置的rinner，router等参数绘制即可。 ## Json文件配置 -1. 扇区背景色着色原则： +1. json字段配置说明 + + ### 罗盘级别参数（根级别） + | 参数名 | 类型 | 必填 | 说明 | 示例 | + |--------|------|------|------|------| + | name | string | 是 | 罗盘配置名称 | "demo" | + | description | string | 否 | 罗盘配置描述 | "luopan demo config" | + | background | string | 是 | 全局背景色（十六进制颜色值），未着色扇区使用此颜色 | "#000000" | + | outerRadius | number | 是 | 罗盘外半径，单位：像素（去掉该参数，自动计算最大半径） | 500 | + | theme | object | 是 | 主题配置对象，包含colorPalettes命名配色方案 | 见下方theme说明 | + | centerIcon | object | 否 | 中心图标配置 | 见下方centerIcon说明 | + | degreeRing | object | 否 | 360度刻度环配置 | 见下方degreeRing说明 | + | layers | array | 是 | 层配置数组，从内向外定义每一层 | 见下方layers说明 | + + **theme对象参数：** + | 参数名 | 类型 | 必填 | 说明 | 示例 | + |--------|------|------|------|------| + | name | string | 否 | 主题名称 | "五行配色主题" | + | colorPalettes | object | 是 | 命名配色方案，定义可复用的颜色键值对 | {"木": "#43A047", "火": "#E53935"} | + + **centerIcon对象参数：** + | 参数名 | 类型 | 必填 | 说明 | 示例 | + |--------|------|------|------|------| + | rIcon | number | 是 | 图标半径，单位：像素 | 50 | + | opacity | number | 是 | 图标透明度（0.0-1.0） | 0.8 | + | name | string | 是 | SVG图标文件名，路径固定为src/assets/icons/ | "centericon.svg" | + + **degreeRing对象参数：** + | 参数名 | 类型 | 必填 | 说明 | 示例 | + |--------|------|------|------|------| + | rInner | number | 是 | 刻度环内半径 | 450 | + | rOuter | number | 是 | 刻度环外半径 | 500 | + | showDegree | number | 是 | 是否显示度数：0=不显示，1=显示 | 1 | + | mode | string | 是 | 刻度线模式："inner"、"outer"或"both" | "both" | + | opacity | number | 是 | 圆环透明度（0.0-1.0） | 0.3 | + | tickLength | number | 是 | 刻度线长度，单位：像素 | 6 | + | majorTick | number | 是 | 主刻度间隔（度） | 10 | + | minorTick | number | 是 | 次刻度间隔（度） | 5 | + | microTick | number | 是 | 微刻度间隔（度） | 1 | + | tickColor | string | 是 | 刻度线颜色（十六进制） | "#ffffff" | + | ringColor | string | 是 | 圆环颜色（十六进制） | "#ffffff" | + + ### 层级别参数（layer对象） + | 参数名 | 类型 | 必填 | 说明 | 示例 | + |--------|------|------|------|------| + | divisions | number | 是 | 等分数，将该层分为多少个扇区 | 12 | + | rInner | number | 是 | 层内半径，单位：像素 | 160 | + | rOuter | number | 是 | 层外半径，单位：像素 | 200 | + | startAngle | number | 否 | 第一个扇区的起始角度（度，0度为正北，顺时针），默认0 | 0 | + | colorRef | string | 否 | 层级颜色引用，引用theme.colorPalettes中的颜色名 | "土" | + | innerFill | number | 否 | 内缩设置：0=不内缩，1=内缩1像素，用于规律填色的扇区 | 1 | + | num | number | 否 | 规律填色：连续着色的扇区数量，与interval配合使用 | 3 | + | interval | number | 否 | 规律填色：着色后间隔的扇区数量，0表示无间隔 | 1 | + | groupSplit | boolean | 否 | 是否显示同组扇区间分割线，false隐藏，默认true | false | + | sectors | array | 否 | 扇区配置数组，可省略表示该层只有填色无内容 | 见下方sectors说明 | + + ### 扇区级别参数（sector对象） + | 参数名 | 类型 | 必填 | 说明 | 示例 | + |--------|------|------|------|------| + | content | string | 否 | 扇区文字内容或SVG文件名，支持"\|"分隔多文本单元 | "子" 或 "甲乙\|子\|丙丁" | + | colorRef | string | 否 | 扇区颜色引用（最高优先级），覆盖层级colorRef | "水" | + | innerFill | number | 否 | 扇区内缩设置：0=不内缩，1=内缩1像素 | 1 | + + **多文本单元说明：** + - content使用"\|"分隔多个文本时，角度按LAYOUT_RATIO_PRESETS自动分配 + - 1个单元：100%；2个：[0.5, 0.5]；3个：[0.25, 0.5, 0.25]；4个：[0.2, 0.3, 0.3, 0.2]；5个以上：平均 + - 单元内自动计算字体大小，单元间无分割线 + +2. 扇区背景色着色原则： 最高优先级，在layer中指定colorRef 第二优先级：colorRef规律填色，也就是说，如果同一个sector中指定了colorRef，该sector也指定了layer级别的colorRef，以前者为准，innerFill使用相同规则。 参数：