269 lines
12 KiB
Plaintext
269 lines
12 KiB
Plaintext
-- ========================================
|
||
-- 罗盘配置文件 (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
|
||
--
|
||
-- ========================================
|