update at 2026-01-21 17:58:55

todolist.md

@@ -1,36 +1,47 @@
 
 # 优化
 ## 当前实现优化点
-1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。以后统一使用json配置来实现罗盘绘制。
+1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。优化为统一使用json配置来实现罗盘绘制。
 2. 扇区的内容可以是是文字或者SVG图标，如为SVG，sectors的content中指定svg文件名，SVG布局规则同文字。
-3. 废弃目前颜色生成规则。使用在Json中严格配置。详见《Json文件配置》。总体规则是：优先级低到高分别是，全局背景色 - layer着色 - sectors着色。
+3. 扇区内容支持多文本单元：使用"|"分隔多个文本（如"甲乙|子|丙丁"），角度分配采用智能策略：
+   - 1个单元：100%
+   - 2个单元：平均 [0.5, 0.5]
+   - 3个单元：中间大 [0.25, 0.5, 0.25]
+   - 4个单元：中间两个大 [0.2, 0.3, 0.3, 0.2]
+   - 5个及以上：平均分配
+   字体大小和位置通过工具函数自动计算。单个扇区内的多文本单元之间无分割线。
+4. 废弃目前颜色生成规则。使用在Json中严格配置。详见《Json文件配置》。总体规则是：优先级低到高分别是，全局背景色 - layer着色 - sectors着色。
+5. Json中不用关注是第几层，按配置的rinner，router等参数绘制即可。
 
 ## Json文件配置
 1. 扇区背景色着色原则：
    最高优先级，在layer中指定colorRef
    第二优先级：colorRef规律填色，也就是说，如果同一个sector中指定了colorRef，该sector也指定了layer级别的colorRef，以前者为准，innerFill使用相同规则。
    参数：
-      innerfill对着色区域生效
-      start表示着色起始扇区
+      startAngle表示第一个扇区的起始角度（以度为单位，0度为正北方向，顺时针增加）
+      innerfill对num、interval定义的着色扇区生效
+      -- start表示着色起始扇区（已废弃，统一从第1个扇区开始）
       num表示连接几个单元着色
       interval表示中间间隔几个单元
-         比如start=2,num=3,interval=1,意思是从第二个扇区开始着色，对2、3、4扇区着色colorref，5扇区全局背景，6、7、8着色colorref…… 
+         比如num=3,interval=1,意思是从第1个扇区开始着色，对1、2、3扇区着色colorref，4扇区全局背景，5、6、7着色colorref…… 
+      groupSplit: 隐藏同组扇区之间的分割线, false表示不显示group中间分割线。如该参数不设置，取默认值true，显示。
 
-    -- ========================================
-    -- 第4层：地支 (12等分)
-    -- ========================================
-    -- 演示：规律填色 - 3个着色，1个间隔
-    -- 着色规律：start=2, num=3, interval=1
-    -- 效果：扇区2-4着色，5空白，6-8着色，9空白，10-12着色，1空白
     ”layers“:
     {
+    -- ========================================
+    -- 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度为正北方向，顺时针）
           "innerFill": 1,      -- 着色区域的内缩设置
           "colorRef": "土",    -- 着色使用的颜色引用
-          "start": 2,          -- 从第2个扇区开始着色（1-based索引）
+          -- "start": 1,       -- 从第1个扇区开始着色（已废弃，统一从第1个扇区开始）
           "num": 3,            -- 连续着色3个扇区
           "interval": 1,       -- 着色后间隔1个扇区
           "sectors": [
@@ -47,10 +58,51 @@
             { "content": "戌" },
             { "content": "亥", "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中间分割线，该参数不设置，默认显示。
+        },
+
+    -- ========================================
+    -- 12等分，隐藏group分割线
+    -- ========================================
+    -- 演示：所有填色为colorRef，不显示group分隔线
+    -- 着色规律：num=3, interval=0
+    -- 效果：扇区1-3，4-6，7-9，10-12四组，只显示组间分割线，组内分割线不显示。
+        {
+          "divisions": 12,
+          "rInner": 160,
+          "rOuter": 200,
+          "startAngle": 30,    -- 第一个扇区的起始角度（度，0度为正北方向，顺时针）
+          "innerFill": 1,      -- 着色区域的内缩设置
+          "colorRef": "土",    -- 着色使用的颜色引用
+          "num": 3,            -- 连续着色3个扇区
+          "interval": 0,       -- 着色后间隔1个扇区
+          "groupSplit": false -- 隐藏同组扇区之间的分割线, false表示不显示group中间分割线，该参数不设置，默认显示。
+          "sectors": [
+            { "content": "子" }, { "content": "丑" }, { "content": "寅" },
+            { "content": "卯" }, { "content": "辰" }, { "content": "巳" },
+            { "content": "午" }, { "content": "未" }, { "content": "申" },
+            { "content": "酉" }, { "content": "戌" }, { "content": "亥" } 
+          ]
+        },
     }
 
-2. 中心icon配置参数
+2. 中心icon配置参数，该icon正向指北，可旋转
    rIcon -- 半径
    opacity -- 圆的透明度
    name -- icon文件名svg，路径固定
@@ -61,7 +113,7 @@
   "centerIcon": {
     "rIcon": 50,           -- 图标半径，单位：像素
     "opacity": 0.8,        -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明）
-    "name": "taiji.svg"    -- SVG图标文件名，路径固定为 /icons/ 目录
+    "name": "centericon.svg"    -- SVG图标文件名，路径固定为 src/assets/icons/ 目录
   }
 
 3. 360度刻度环配置参数：
@@ -80,7 +132,8 @@
     "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
+    "tickLength": 6,      -- 刻度线长度，单位：像素。
+    "tickLengthStep“: 1, -- 刻度线长度差，1表示minorTick比majorTick短1px， microTick比minorTick短1px。0表示majorTick,minorTick,minorTick长度相同。
     "majorTick": 10,       -- 主刻度间隔（度），如 10 表示每 10° 一个主刻度
     "minorTick": 5,        -- 次刻度间隔（度），如 2 表示每 2° 一个次刻度
     "microTick": 1,       -- 微刻度间隔（度），如 1 表示每 1° 一个微刻度