-- ======================================== -- 罗盘配置文件 (Demo Configuration) -- ======================================== -- 该文件不是正式JSON，支持使用 -- 添加注释 -- -- 功能说明： -- 1. 支持命名配色方案 (Named Color Palettes) -- 2. 支持规律填色机制 (Pattern-based Coloring) -- 3. 文字颜色自动计算 (Auto Text Color) -- 4. 扇区内缩效果控制 (Inner Fill Control) -- ======================================== { "name": "demo", "description": "luopan demo config with named color palettes", -- ======================================== -- 全局配置 -- ======================================== "background": "黑", -- 全局背景色，未着色扇区使用此颜色（支持 colorPalettes） "strokeWidth": 0.3, -- 扇区边界线宽度（像素） "strokeColor": "灰", -- 扇区边界线颜色（支持 colorPalettes） "strokeOpacity": 0.15, -- 扇区边界线透明度 -- outerRadius 可选，仅在没有任何 layer 时作为兜底外半径使用 -- ======================================== -- 主题配置 -- ======================================== -- 主题统一放在 public/themes.json 中管理 -- 通过 themeRef 引用主题名称；不填则使用 themes.json.default "themeRef": "五行弱", -- ======================================== -- 层配置 (Layers Configuration) -- ======================================== -- 从内向外定义每一层的配置 "layers": [ -- ======================================== -- 中心图标层 (Center Icon Layer) -- ======================================== { "type": "centerIcon", "centerIcon": { "rIcon": 50, -- 图标半径，单位：像素 "opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明） "name": "centericon.svg" -- SVG图标文件名，路径固定为 /icons/ 目录 } }, -- ======================================== -- 阴阳 (2等分) -- ======================================== -- 演示：扇区级别 colorRef 优先级最高 { "divisions": 2, -- 2等分 "rInner": 60, -- 内半径 "rOuter": 90, -- 外半径 "startAngle": 0, -- 第一个扇区的起始角度（度，0度为正北方向，顺时针） -- "colorPalette": "Black", -- 默认配色（已废弃，已注释） "sectors": [ { "content": "阴", -- 扇区文字内容 "innerFill": 1 -- 1=显示内缩效果，0=不显示 }, { "content": "阳", "colorRef": "White", -- 扇区级别指定颜色（优先级最高） "innerFill": 0 } ] }, -- ======================================== -- 八卦 (8等分) -- ======================================== -- 演示：旧的 colorMode 方式（将被移除） { "divisions": 8, "rInner": 120, "rOuter": 160, "startAngle": 0, -- 第一个扇区的起始角度（度，0度为正北方向，顺时针） -- "colorPalette": "Wood", -- 旧方式：使用 colorPalette -- "colorMode": "gradient", -- 旧方式：渐变模式（将被移除） "sectors": [ { "content": "乾", "innerFill": 1 }, { "content": "兑", "innerFill": 0 }, { "content": "离", "innerFill": 1 }, { "content": "震", "innerFill": 0 }, { "content": "巽", "innerFill": 1 }, { "content": "坎", "innerFill": 0 }, { "content": "艮", "innerFill": 1 }, { "content": "坤", "innerFill": 0 } ] }, -- ======================================== -- 地支 (12等分) -- ======================================== -- 演示：规律填色 - 3个着色，1个间隔 -- 着色规律：num=3, interval=1 -- 效果：扇区1-3着色，4空白，5-7着色，8空白，9-11着色，12空白 { "divisions": 12, "rInner": 160, "rOuter": 200, "startAngle": 0, -- 第一个扇区的起始角度（度，0度为正北方向，顺时针） "colorRef": "土", -- 着色使用的颜色引用 "innerFill": 1, -- 着色区域的内缩设置 -- "patternOffset": 2, -- 第一个着色单元偏移1个扇区（可选） "num": 3, -- 连续着色3个扇区 "interval": 1, -- 着色后间隔1个扇区 "sectors": [ { "content": "子", "colorRef": "水", "innerFill": 1 }, -- 高优先级着色：水 { "content": "丑" }, { "content": "寅", "colorRef": "木", "innerFill": 0 }, -- 高优先级着色：木 { "content": "卯", "colorRef": "木", "innerFill": 1 }, -- 高优先级着色：木 { "content": "辰" }, { "content": "巳", "colorRef": "火", "innerFill": 1 }, -- 高优先级着色：火 { "content": "午", "colorRef": "火", "innerFill": 0 }, -- 高优先级着色：火 { "content": "未", "innerFill": 1 }, { "content": "申", "colorRef": "金", "innerFill": 0 }, -- 高优先级着色：金 { "content": "酉", "colorRef": "金", "innerFill": 1 }, -- 高优先级着色：金 { "content": "戌" }, { "content": "亥", "innerFill": 0 } ] } -- ======================================== -- 24等分多文本单元示例 -- ======================================== -- 演示：扇区内使用"|"分隔多个文本单元 -- 文本布局：各单元角度按 LAYOUT_RATIO [0.25, 0.5, 0.25] 分配 -- 字体大小和位置自动计算，单元内无分割线，通过全局变量LAYOUT_RATIO，可以计算3个单元的角度。通过现在的工具函数，可以计算得到字体大小及排列方式。 { "divisions": 24, "rInner": 210, "rOuter": 240, "startAngle": 0, "sectors": [ { "content": "甲乙|子|丙丁", "colorRef": "木", "innerFill": 1 }, -- 3个文本单元：左25%"甲乙"，中50%"子"，右25%"丙丁" { "content": "丑" }, { "content": "戊己|寅|庚辛", "colorRef": "土", "innerFill": 0 }, { "content": "卯" }, { "content": "壬癸|辰|甲乙", "innerFill": 1 }, { "content": "巳" }, { "content": "丙丁|午|戊己", "colorRef": "火", "innerFill": 0 }, { "content": "未" }, { "content": "庚辛|申|壬癸", "colorRef": "金", "innerFill": 1 }, { "content": "酉" }, { "content": "甲乙|戌|丙丁", "innerFill": 0 }, { "content": "亥" }, { "content": "戊己|子|庚辛" }, { "content": "丑" }, { "content": "壬癸|寅|甲乙" }, { "content": "卯" }, { "content": "丙丁|辰|戊己" }, { "content": "巳" }, { "content": "庚辛|午|壬癸" }, { "content": "未" }, { "content": "甲乙|申|丙丁" }, { "content": "酉" }, { "content": "戊己|戌|庚辛" }, { "content": "亥" } ] }, -- ======================================== -- 16等分4个文本单元示例 -- ======================================== -- 演示：扇区内使用"|"分隔4个文本单元，每个单元2字 -- 文本布局：4个单元按全局配置LAYOUT_RATIO_PRESETS [0.2, 0.3, 0.3, 0.2] 分配，中间两个大 -- 每个扇区22.5度，字体大小和位置自动计算，单元内无分割线 { "divisions": 16, "rInner": 240, "rOuter": 270, "startAngle": 0, "sectors": [ { "content": "甲乙|丙丁|戊己|庚辛", "colorRef": "木", "innerFill": 1 }, -- 4个文本单元：[20%, 30%, 30%, 20%] { "content": "壬癸|甲乙|丙丁|戊己", "colorRef": "土", "innerFill": 0 }, { "content": "庚辛|壬癸|甲乙|丙丁", "innerFill": 1 }, { "content": "戊己|庚辛|壬癸|甲乙", "colorRef": "火", "innerFill": 0 }, { "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "金", "innerFill": 1 }, { "content": "子丑|寅卯|辰巳|午未", "innerFill": 0 }, { "content": "申酉|戌亥|子丑|寅卯", "colorRef": "木", "innerFill": 1 }, { "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 }, { "content": "甲乙|丙丁|戊己|庚辛", "innerFill": 1 }, { "content": "壬癸|甲乙|丙丁|戊己", "colorRef": "土", "innerFill": 0 }, { "content": "庚辛|壬癸|甲乙|丙丁", "colorRef": "木", "innerFill": 1 }, { "content": "戊己|庚辛|壬癸|甲乙", "innerFill": 0 }, { "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "火", "innerFill": 1 }, { "content": "子丑|寅卯|辰巳|午未", "colorRef": "金", "innerFill": 0 }, { "content": "申酉|戌亥|子丑|寅卯", "innerFill": 1 }, { "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 } ] }, -- ======================================== -- 120等分。注意：没有sectors，表示扇区没有内容，只有填色 -- ======================================== -- 演示：规律填色 -- 着色规律：num=3, interval=2 -- 效果：扇区1-3着色，4、5背景色…… { "divisions": 120, "rInner": 300, "rOuter": 310, "startAngle": -4.5, -- 第一个扇区的起始角度（度，0度为正北方向，顺时针） "innerFill": 0, -- 着色区域的内缩设置 "colorRef": "火", -- 着色使用的颜色引用 "num": 3, -- 连续着色3个扇区，每个区域跨3度 "interval": 2, -- 着色后间隔1个扇区 "groupSplit": false -- 新增：隐藏同组扇区之间的分割线, false表示不显示group中间分割线，该参数不设置，默认显示。 }, -- ======================================== -- 360度刻度环层 (360 Degree Scale Ring Layer) -- ======================================== { "type": "degreeRing", "degreeRing": { "rInner": 450, -- 刻度环内半径 "rOuter": 500, -- 刻度环外半径 "showDegree": 1, -- 是否显示度数：0=不显示，1=显示（按 10° 间隔） "mode": "both", -- 刻度线模式："inner"（在rInner外侧）、"outer"（在rOuter内侧）、"both"（两侧都有，度数居中） "opacity": 0.3, -- 圆环透明度（0.0-1.0，设置为0可以只显示刻度而不显示圆圈） "tickLength": 6, -- 刻度线长度，单位：像素, minorTick比majorTick短1px， microTick比minorTick短1px "majorTick": 10, -- 主刻度间隔（度），如 10 表示每 10° 一个主刻度 "minorTick": 5, -- 次刻度间隔（度），如 2 表示每 2° 一个次刻度 "microTick": 1, -- 微刻度间隔（度），如 1 表示每 1° 一个微刻度 "tickColor": "#ffffff",-- 刻度线颜色 "ringColor": "#ffffff" -- 圆环颜色 } } ] } -- ======================================== -- 扇区背景色着色优先级总结 -- ======================================== -- 优先级1（最高）：sectors 中单独指定 colorRef -- 示例：{ "content": "木", "colorRef": "木" } -- -- 优先级2：层级规律填色配置 -- 通过 colorRef + patternOffset + num + interval 实现规律着色 -- 未着色的扇区使用全局 background 颜色 -- -- ======================================== -- 规律填色算法说明 -- ======================================== -- startAngle: 第一个扇区的起始角度（度，0度为正北方向，顺时针增加） -- patternOffset: 规律填色起始偏移（扇区序号，从1开始，默认1，未指定时与startAngle对齐） -- num: 连续着色扇区数量 -- interval: 着色后间隔的扇区数量 -- -- 算法：从第 patternOffset 个扇区开始，循环执行 "着色num个" → "跳过interval个" -- 特殊情况：interval=0 表示无间隔，全部着色 -- -- 示例：divisions=12, startAngle=0, num=3, interval=1 -- 扇区1-3: 着色（num=3） -- 扇区4: 空白（interval=1） -- 扇区5-7: 着色（num=3） -- 扇区8: 空白（interval=1） -- 扇区9-11: 着色（num=3） -- 扇区12: 空白（interval=1） -- 示例：interval=0，表示该layer的所有扇区使用同样的colorRef -- -- ========================================