diff --git a/public/complex-luopan.json b/public/complex-luopan.json deleted file mode 100644 index c2e6ecf..0000000 --- a/public/complex-luopan.json +++ /dev/null @@ -1,193 +0,0 @@ -{ - "name": "传统风水罗盘(完整版)", - "description": "24层复杂罗盘配置,包含天干地支、八卦、二十四山、六十甲子等", - "theme": "chinese", - "outerRadius": 500, - "layers": [ - { - "divisions": 2, - "rInner": 0, - "rOuter": 30, - "sectors": [ - { "content": "阴", "fillColor": "#000000", "textColor": "#FFFFFF" }, - { "content": "阳", "fillColor": "#FFFFFF", "textColor": "#000000" } - ] - }, - { - "divisions": 4, - "rInner": 30, - "rOuter": 60, - "sectors": [ - { "content": "少阳", "fillColor": "#FFD700" }, - { "content": "太阳", "fillColor": "#FF0000", "textColor": "#FFFFFF" }, - { "content": "少阴", "fillColor": "#32CD32" }, - { "content": "太阴", "fillColor": "#0000FF", "textColor": "#FFFFFF" } - ] - }, - { - "divisions": 8, - "rInner": 60, - "rOuter": 100, - "sectors": [ - { "content": "乾☰", "fillColor": "#DC143C", "textColor": "#FFFFFF" }, - { "content": "兑☱", "fillColor": "#FFD700", "textColor": "#000000" }, - { "content": "离☲", "fillColor": "#FF6347", "textColor": "#FFFFFF" }, - { "content": "震☳", "fillColor": "#32CD32", "textColor": "#000000" }, - { "content": "巽☴", "fillColor": "#00A86B", "textColor": "#FFFFFF" }, - { "content": "坎☵", "fillColor": "#4169E1", "textColor": "#FFFFFF" }, - { "content": "艮☶", "fillColor": "#CD853F", "textColor": "#000000" }, - { "content": "坤☷", "fillColor": "#8B4513", "textColor": "#FFFFFF" } - ] - }, - { - "divisions": 12, - "rInner": 100, - "rOuter": 130, - "sectors": [ - { "content": "子", "fillColor": "#4169E1", "textColor": "#FFFFFF" }, - { "content": "丑", "fillColor": "#8B4513", "textColor": "#FFFFFF" }, - { "content": "寅", "fillColor": "#228B22", "textColor": "#FFFFFF" }, - { "content": "卯", "fillColor": "#00A86B", "textColor": "#FFFFFF" }, - { "content": "辰", "fillColor": "#8B7355", "textColor": "#FFFFFF" }, - { "content": "巳", "fillColor": "#FF4500", "textColor": "#FFFFFF" }, - { "content": "午", "fillColor": "#DC143C", "textColor": "#FFFFFF" }, - { "content": "未", "fillColor": "#8B4513", "textColor": "#FFFFFF" }, - { "content": "申", "fillColor": "#FFD700", "textColor": "#000000" }, - { "content": "酉", "fillColor": "#FFA500", "textColor": "#000000" }, - { "content": "戌", "fillColor": "#8B7355", "textColor": "#FFFFFF" }, - { "content": "亥", "fillColor": "#000080", "textColor": "#FFFFFF" } - ] - }, - { - "divisions": 24, - "rInner": 130, - "rOuter": 170, - "sectors": [ - { "content": "壬" }, { "content": "子" }, { "content": "癸" }, - { "content": "丑" }, { "content": "艮" }, { "content": "寅" }, - { "content": "甲" }, { "content": "卯" }, { "content": "乙" }, - { "content": "辰" }, { "content": "巽" }, { "content": "巳" }, - { "content": "丙" }, { "content": "午" }, { "content": "丁" }, - { "content": "未" }, { "content": "坤" }, { "content": "申" }, - { "content": "庚" }, { "content": "酉" }, { "content": "辛" }, - { "content": "戌" }, { "content": "乾" }, { "content": "亥" } - ], - "colorMode": "alternating", - "alternatingColors": ["#FFF9C4", "#FFCCBC"] - }, - { - "divisions": 60, - "rInner": 170, - "rOuter": 210, - "sectors": [ - { "content": "甲子" }, { "content": "乙丑" }, { "content": "丙寅" }, { "content": "丁卯" }, { "content": "戊辰" }, - { "content": "己巳" }, { "content": "庚午" }, { "content": "辛未" }, { "content": "壬申" }, { "content": "癸酉" }, - { "content": "甲戌" }, { "content": "乙亥" }, { "content": "丙子" }, { "content": "丁丑" }, { "content": "戊寅" }, - { "content": "己卯" }, { "content": "庚辰" }, { "content": "辛巳" }, { "content": "壬午" }, { "content": "癸未" }, - { "content": "甲申" }, { "content": "乙酉" }, { "content": "丙戌" }, { "content": "丁亥" }, { "content": "戊子" }, - { "content": "己丑" }, { "content": "庚寅" }, { "content": "辛卯" }, { "content": "壬辰" }, { "content": "癸巳" }, - { "content": "甲午" }, { "content": "乙未" }, { "content": "丙申" }, { "content": "丁酉" }, { "content": "戊戌" }, - { "content": "己亥" }, { "content": "庚子" }, { "content": "辛丑" }, { "content": "壬寅" }, { "content": "癸卯" }, - { "content": "甲辰" }, { "content": "乙巳" }, { "content": "丙午" }, { "content": "丁未" }, { "content": "戊申" }, - { "content": "己酉" }, { "content": "庚戌" }, { "content": "辛亥" }, { "content": "壬子" }, { "content": "癸丑" }, - { "content": "甲寅" }, { "content": "乙卯" }, { "content": "丙辰" }, { "content": "丁巳" }, { "content": "戊午" }, - { "content": "己未" }, { "content": "庚申" }, { "content": "辛酉" }, { "content": "壬戌" }, { "content": "癸亥" } - ], - "colorMode": "alternating", - "alternatingColors": ["#FFE082", "#FFCC80", "#FFAB91"] - }, - { - "divisions": 72, - "rInner": 210, - "rOuter": 250, - "sectors": [ - { "content": "1" }, { "content": "2" }, { "content": "3" }, { "content": "4" }, { "content": "5" }, - { "content": "6" }, { "content": "7" }, { "content": "8" }, { "content": "9" }, { "content": "10" }, - { "content": "11" }, { "content": "12" }, { "content": "13" }, { "content": "14" }, { "content": "15" }, - { "content": "16" }, { "content": "17" }, { "content": "18" }, { "content": "19" }, { "content": "20" }, - { "content": "21" }, { "content": "22" }, { "content": "23" }, { "content": "24" }, { "content": "25" }, - { "content": "26" }, { "content": "27" }, { "content": "28" }, { "content": "29" }, { "content": "30" }, - { "content": "31" }, { "content": "32" }, { "content": "33" }, { "content": "34" }, { "content": "35" }, - { "content": "36" }, { "content": "37" }, { "content": "38" }, { "content": "39" }, { "content": "40" }, - { "content": "41" }, { "content": "42" }, { "content": "43" }, { "content": "44" }, { "content": "45" }, - { "content": "46" }, { "content": "47" }, { "content": "48" }, { "content": "49" }, { "content": "50" }, - { "content": "51" }, { "content": "52" }, { "content": "53" }, { "content": "54" }, { "content": "55" }, - { "content": "56" }, { "content": "57" }, { "content": "58" }, { "content": "59" }, { "content": "60" }, - { "content": "61" }, { "content": "62" }, { "content": "63" }, { "content": "64" }, { "content": "65" }, - { "content": "66" }, { "content": "67" }, { "content": "68" }, { "content": "69" }, { "content": "70" }, - { "content": "71" }, { "content": "72" } - ], - "colorMode": "solid", - "defaultFillColor": "#FFF59D" - }, - { - "divisions": 120, - "rInner": 250, - "rOuter": 290, - "colorMode": "alternating", - "alternatingColors": ["#FFEB3B", "#FFC107"] - }, - { - "divisions": 120, - "rInner": 290, - "rOuter": 320, - "colorMode": "solid", - "defaultFillColor": "#FFFDE7" - }, - { - "divisions": 72, - "rInner": 320, - "rOuter": 350, - "sectors": [ - { "content": "0" }, { "content": "5" }, { "content": "10" }, { "content": "15" }, - { "content": "20" }, { "content": "25" }, { "content": "30" }, { "content": "35" }, - { "content": "40" }, { "content": "45" }, { "content": "50" }, { "content": "55" }, - { "content": "60" }, { "content": "65" }, { "content": "70" }, { "content": "75" }, - { "content": "80" }, { "content": "85" }, { "content": "90" }, { "content": "95" }, - { "content": "100" }, { "content": "105" }, { "content": "110" }, { "content": "115" }, - { "content": "120" }, { "content": "125" }, { "content": "130" }, { "content": "135" }, - { "content": "140" }, { "content": "145" }, { "content": "150" }, { "content": "155" }, - { "content": "160" }, { "content": "165" }, { "content": "170" }, { "content": "175" }, - { "content": "180" }, { "content": "185" }, { "content": "190" }, { "content": "195" }, - { "content": "200" }, { "content": "205" }, { "content": "210" }, { "content": "215" }, - { "content": "220" }, { "content": "225" }, { "content": "230" }, { "content": "235" }, - { "content": "240" }, { "content": "245" }, { "content": "250" }, { "content": "255" }, - { "content": "260" }, { "content": "265" }, { "content": "270" }, { "content": "275" }, - { "content": "280" }, { "content": "285" }, { "content": "290" }, { "content": "295" }, - { "content": "300" }, { "content": "305" }, { "content": "310" }, { "content": "315" }, - { "content": "320" }, { "content": "325" }, { "content": "330" }, { "content": "335" }, - { "content": "340" }, { "content": "345" }, { "content": "350" }, { "content": "355" } - ], - "colorMode": "solid", - "defaultFillColor": "#FFFDE7" - }, - { - "divisions": 72, - "rInner": 350, - "rOuter": 380, - "colorMode": "alternating", - "alternatingColors": ["#FFD54F", "#FFF176"] - }, - { - "divisions": 72, - "rInner": 380, - "rOuter": 420, - "colorMode": "solid", - "defaultFillColor": "#FFEB3B" - }, - { - "divisions": 72, - "rInner": 420, - "rOuter": 460, - "colorMode": "alternating", - "alternatingColors": ["#FFD54F", "#FFCA28", "#FFC107"] - }, - { - "divisions": 72, - "rInner": 460, - "rOuter": 500, - "colorMode": "solid", - "defaultFillColor": "#FFD54F" - } - ] -} diff --git a/src/assets/centericon.svg b/src/assets/centericon.svg new file mode 100644 index 0000000..cb8c35c --- /dev/null +++ b/src/assets/centericon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/todolist.md b/todolist.md index a7bbcd7..cbf41db 100644 --- a/todolist.md +++ b/todolist.md @@ -1,4 +1,10 @@ +# 优化 +## 当前实现优化点 +1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。以后统一使用json配置来实现罗盘绘制。 +2. 扇区的内容可以是是文字或者SVG图标,如为SVG,sectors的content中指定svg文件名,SVG布局规则同文字。 +3. 废弃目前颜色生成规则。使用在Json中严格配置。详见《Json文件配置》。总体规则是:优先级低到高分别是,全局背景色 - layer着色 - sectors着色。 + ## Json文件配置 1. 扇区背景色着色原则: 最高优先级,在layer中指定colorRef