gavin/lupin-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update at 2026-01-22 18:43:01

Browse Source
This commit is contained in:
douboer
2026-01-22 18:43:01 +08:00
parent c23c71eabf
commit a930a99a50
23 changed files with 2082 additions and 1186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
public/demo.json Normal file
View File

@@ -0,0 +1,175 @@
{
"name": "demo",
"description": "luopan demo config with named color palettes",
"background": "#fff000",
"outerRadius": 500,
"theme": {
"name": "五行配色主题",
"colorPalettes": {
"黑": "#000000",
"灰": "#757575",
"白": "#ffffff",
"木": "#43A047",
"火": "#E53935",
"土": "#8D6E63",
"金": "#78909C",
"水": "#0288D1",
"热": "#FF8F00",
"冷": "#1976D2",
"强": "#D32F2F",
"\u8f6f": "#FFE0B2"
}
},
"layers": [
{
"type": "centerIcon",
"centerIcon": {
"rIcon": 50,
"opacity": 0.8,
"name": "centericon.svg"
}
},
{
"divisions": 2,
"rInner": 90,
"rOuter": 120,
"startAngle": 0,
"sectors": [
{
"content": "阴",
"innerFill": 1
},
{
"content": "阳",
"colorRef": "White",
"innerFill": 0
}
]
},
{
"divisions": 8,
"rInner": 120,
"rOuter": 160,
"startAngle": 0,
"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 }
]
},
{
"divisions": 12,
"rInner": 160,
"rOuter": 200,
"startAngle": 0,
"colorRef": "土",
"innerFill": 1,
"num": 3,
"interval": 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 }
]
},
{
"divisions": 24,
"rInner": 210,
"rOuter": 240,
"startAngle": 0,
"sectors": [
{ "content": "甲乙|子|丙丁", "colorRef": "木", "innerFill": 1 },
{ "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": "亥" }
]
},
{
"divisions": 16,
"rInner": 240,
"rOuter": 270,
"startAngle": 0,
"sectors": [
{ "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 },
{ "content": "庚辛|壬癸|甲乙|丙丁", "colorRef": "木", "innerFill": 1 },
{ "content": "戊己|庚辛|壬癸|甲乙", "innerFill": 0 },
{ "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "火", "innerFill": 1 },
{ "content": "子丑|寅卯|辰巳|午未", "colorRef": "金", "innerFill": 0 },
{ "content": "申酉|戌亥|子丑|寅卯", "innerFill": 1 },
{ "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 }
]
},
{
"divisions": 120,
"rInner": 300,
"rOuter": 310,
"startAngle": -4.5,
"innerFill": 0,
"colorRef": "火",
"num": 3,
"interval": 2,
"groupSplit": false
},
{
"type": "degreeRing",
"degreeRing": {
"rInner": 350,
"rOuter": 380,
"showDegree": 1,
"mode": "both",
"opacity": 1,
"tickLength": 6,
"tickLengthStep": 2,
"majorTick": 10,
"minorTick": 5,
"microTick": 1,
"tickColor": "#000000",
"ringColor": "#000000"
}
}
]
}

60
public/demo.json.conf
View File

@@ -48,33 +48,7 @@
"冷": "#1976D2", -- 冷蓝（冷色调）
"强": "#D32F2F", -- 强烈红（高饱和度）
"\u8f6f": "#FFE0B2" -- 柔和杏（低饱和度）
}
},
-- ========================================
-- 中心图标配置 (Center Icon Configuration)
-- ========================================
"centerIcon": {
"rIcon": 50, -- 图标半径，单位：像素
"opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明）
"name": "centericon.svg" -- SVG图标文件名，路径固定为 /icons/ 目录
},
-- ========================================
-- 360度刻度环配置 (360 Degree Scale Ring)
-- ========================================
"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" -- 圆环颜色
},
},
-- ========================================
@@ -82,6 +56,17 @@
-- ========================================
-- 从内向外定义每一层的配置
"layers": [
-- ========================================
-- 中心图标层 (Center Icon Layer)
-- ========================================
{
"type": "centerIcon",
"centerIcon": {
"rIcon": 50, -- 图标半径，单位：像素
"opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明）
"name": "centericon.svg" -- SVG图标文件名，路径固定为 /icons/ 目录
}
},
-- ========================================
-- 阴阳 (2等分)
-- ========================================
@@ -246,6 +231,26 @@
"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" -- 圆环颜色
}
}
]
}
@@ -281,4 +286,3 @@
-- 示例：interval=0，表示该layer的所有扇区使用同样的colorRef
--
-- ========================================

174
public/demo2.json Normal file
View File

@@ -0,0 +1,174 @@
{
"name": "demo2",
"description": "luopan demo config with named color palettes",
"background": "#000000",
"outerRadius": 500,
"theme": {
"name": "五行配色主题",
"colorPalettes": {
"黑": "#000000",
"灰": "#757575",
"白": "#ffffff",
"木": "#43A047",
"火": "#E53935",
"土": "#8D6E63",
"金": "#78909C",
"水": "#0288D1",
"热": "#FF8F00",
"冷": "#1976D2",
"强": "#D32F2F",
"\u8f6f": "#FFE0B2"
}
},
"layers": [
{
"type": "centerIcon",
"centerIcon": {
"rIcon": 50,
"opacity": 0.8,
"name": "centericon.svg"
}
},
{
"divisions": 2,
"rInner": 60,
"rOuter": 90,
"startAngle": 0,
"sectors": [
{
"content": "阴",
"innerFill": 1
},
{
"content": "阳",
"colorRef": "White",
"innerFill": 0
}
]
},
{
"divisions": 8,
"rInner": 120,
"rOuter": 160,
"startAngle": 0,
"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 }
]
},
{
"divisions": 12,
"rInner": 160,
"rOuter": 200,
"startAngle": 0,
"colorRef": "土",
"innerFill": 1,
"num": 3,
"interval": 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 }
]
},
{
"divisions": 24,
"rInner": 210,
"rOuter": 240,
"startAngle": 0,
"sectors": [
{ "content": "甲乙|子|丙丁", "colorRef": "木", "innerFill": 1 },
{ "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": "亥" }
]
},
{
"divisions": 16,
"rInner": 240,
"rOuter": 270,
"startAngle": 0,
"sectors": [
{ "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 },
{ "content": "庚辛|壬癸|甲乙|丙丁", "colorRef": "木", "innerFill": 1 },
{ "content": "戊己|庚辛|壬癸|甲乙", "innerFill": 0 },
{ "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "火", "innerFill": 1 },
{ "content": "子丑|寅卯|辰巳|午未", "colorRef": "金", "innerFill": 0 },
{ "content": "申酉|戌亥|子丑|寅卯", "innerFill": 1 },
{ "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 }
]
},
{
"divisions": 120,
"rInner": 300,
"rOuter": 310,
"startAngle": -4.5,
"innerFill": 0,
"colorRef": "火",
"num": 3,
"interval": 2,
"groupSplit": false
},
{
"type": "degreeRing",
"degreeRing": {
"rInner": 450,
"rOuter": 500,
"showDegree": 1,
"mode": "both",
"opacity": 0.3,
"tickLength": 6,
"majorTick": 10,
"minorTick": 5,
"microTick": 1,
"tickColor": "#ffffff",
"ringColor": "#ffffff"
}
}
]
}