gavin/lupin-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a8089766ef5d0103fe856d1d17a5532d42003fca
lupin-demo/todolist.md
douboer a8089766ef update at 2026-01-21 19:04:10
2026-01-21 19:04:10 +08:00

12 KiB
Raw Blame History

优化

当前实现优化点

  1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。优化为统一使用json配置来实现罗盘绘制。
  2. 扇区的内容可以是是文字或者SVG图标，如为SVG，sectors的content中指定svg文件名，SVG布局规则同文字。
  3. 扇区内容支持多文本单元：使用"|"分隔多个文本（如"甲乙|子|丙丁"），角度分配采用智能策略，全局配置LAYOUT_RATIO_PRESETS：
    • 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. json字段配置说明

    罗盘级别参数（根级别）

    参数名 类型 必填 说明 示例
    name string 是 罗盘配置名称 "demo"
    description string 否 罗盘配置描述 "luopan demo config"
    background string 是 全局背景色（十六进制颜色值），未着色扇区使用此颜色 "#000000"
    outerRadius number 是 罗盘外半径，单位：像素（去掉该参数，自动计算最大半径） 500
    theme object 是 主题配置对象，包含colorPalettes命名配色方案 见下方theme说明
    centerIcon object 否 中心图标配置 见下方centerIcon说明
    degreeRing object 否 360度刻度环配置 见下方degreeRing说明
    layers array 是 层配置数组，从内向外定义每一层 见下方layers说明

    theme对象参数：

    参数名 类型 必填 说明 示例
    name string 否 主题名称 "五行配色主题"
    colorPalettes object 是 命名配色方案，定义可复用的颜色键值对 {"木": "#43A047", "火": "#E53935"}

    centerIcon对象参数：

    参数名 类型 必填 说明 示例
    rIcon number 是 图标半径，单位：像素 50
    opacity number 是 图标透明度（0.0-1.0） 0.8
    name string 是 SVG图标文件名，路径固定为src/assets/icons/ "centericon.svg"

    degreeRing对象参数：

    参数名 类型 必填 说明 示例
    rInner number 是 刻度环内半径 450
    rOuter number 是 刻度环外半径 500
    showDegree number 是 是否显示度数：0=不显示，1=显示 1
    mode string 是 刻度线模式："inner"、"outer"或"both" "both"
    opacity number 是 圆环透明度（0.0-1.0） 0.3
    tickLength number 是 刻度线长度，单位：像素 6
    majorTick number 是 主刻度间隔（度） 10
    minorTick number 是 次刻度间隔（度） 5
    microTick number 是 微刻度间隔（度） 1
    tickColor string 是 刻度线颜色（十六进制） "#ffffff"
    ringColor string 是 圆环颜色（十六进制） "#ffffff"

    层级别参数（layer对象）

    参数名 类型 必填 说明 示例
    divisions number 是 等分数，将该层分为多少个扇区 12
    rInner number 是 层内半径，单位：像素 160
    rOuter number 是 层外半径，单位：像素 200
    startAngle number 否 第一个扇区的起始角度（度，0度为正北，顺时针），默认0 0
    colorRef string 否 层级颜色引用，引用theme.colorPalettes中的颜色名 "土"
    innerFill number 否 内缩设置：0=不内缩，1=内缩1像素，用于规律填色的扇区 1
    num number 否 规律填色：连续着色的扇区数量，与interval配合使用 3
    interval number 否 规律填色：着色后间隔的扇区数量，0表示无间隔 1
    groupSplit boolean 否 是否显示同组扇区间分割线，false隐藏，默认true false
    sectors array 否 扇区配置数组，可省略表示该层只有填色无内容 见下方sectors说明

    扇区级别参数（sector对象）

    参数名 类型 必填 说明 示例
    content string 否 扇区文字内容或SVG文件名，支持"|"分隔多文本单元 "子" 或 "甲乙|子|丙丁"
    colorRef string 否 扇区颜色引用（最高优先级），覆盖层级colorRef "水"
    innerFill number 否 扇区内缩设置：0=不内缩，1=内缩1像素 1

    多文本单元说明：

    • content使用"|"分隔多个文本时，角度按LAYOUT_RATIO_PRESETS自动分配
    • 1个单元：100%；2个：[0.5, 0.5]；3个：[0.25, 0.5, 0.25]；4个：[0.2, 0.3, 0.3, 0.2]；5个以上：平均
    • 单元内自动计算字体大小，单元间无分割线

  2. 扇区背景色着色原则： 最高优先级，在layer中指定colorRef 第二优先级：colorRef规律填色，也就是说，如果同一个sector中指定了colorRef，该sector也指定了layer级别的colorRef，以前者为准，innerFill使用相同规则。 参数： startAngle表示第一个扇区的起始角度（以度为单位，0度为正北方向，顺时针增加） innerfill对num、interval定义的着色扇区生效 -- start表示着色起始扇区（已废弃，统一从第1个扇区开始） num表示连接几个单元着色 interval表示中间间隔几个单元 比如num=3,interval=1,意思是从第1个扇区开始着色，对1、2、3扇区着色colorref，4扇区全局背景，5、6、7着色colorref…… groupSplit: 隐藏同组扇区之间的分割线, false表示不显示group中间分割线。如该参数不设置，取默认值true，显示。

    ”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": 1, -- 从第1个扇区开始着色（已废弃，统一从第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 } ] }, -- ======================================== -- 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": "亥" } ] }, }

  3. 中心icon配置参数，该icon正向指北，可旋转 rIcon -- 半径 opacity -- 圆的透明度 name -- icon文件名svg，路径固定

-- ======================================== -- 中心图标配置 (Center Icon Configuration) -- ======================================== "centerIcon": { "rIcon": 50, -- 图标半径，单位：像素 "opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明） "name": "centericon.svg" -- SVG图标文件名，路径固定为 src/assets/icons/ 目录 }

  1. 360度刻度环配置参数： rinner router showDegree -- 是否显示度数，0不限时，1显示，如显示按10度间隔显示 mode -- inner（表示刻度线在rinner的外部），outter（表示刻度线在routter的内部），both（两边都标注，度数（如有）居于中间） opacity -- 圆的透明度，目的是有时候只需要显示刻度，而不用显示圆圈

-- ======================================== -- 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, -- 刻度线长度，单位：像素。 "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° 一个微刻度 "tickColor": "#ffffff",-- 刻度线颜色 "ringColor": "#ffffff" -- 圆环颜色 }