236 lines
14 KiB
Markdown
236 lines
14 KiB
Markdown
|
||
# 优化
|
||
## 当前实现优化点
|
||
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等参数绘制即可。
|
||
6. 在json中增加全局中定义strokeWidth,strokeColor，strokeOpacity, 如在json中定义，覆盖constants中SECTOR_STROKE_WIDTH，和stroke，如json每定义，使用代码中默认。颜色可以使用colorPalettes中定义的颜色，background也可以使用colorPalettes定义的颜色。
|
||
7. 需求：json中配置的背景色，只对罗盘区域着色
|
||
8. 收集五行、生肖，八卦、64卦、星座、洛书等svg到icon下的指定文件夹。可以从iconfront下找。
|
||
|
||
## Json文件配置
|
||
### json字段配置说明
|
||
|
||
### 罗盘级别参数（根级别）
|
||
| 参数名 | 类型 | 必填 | 说明 | 示例 |
|
||
|--------|------|------|------|------|
|
||
| name | string | 是 | 罗盘配置名称 | "demo" |
|
||
| description | string | 否 | 罗盘配置描述 | "luopan demo config" |
|
||
| background | string | 是 | 全局背景色（支持十六进制或 colorPalettes 名称），未着色扇区使用此颜色 | "#000000" |
|
||
| strokeWidth | number | 否 | 扇区边界线宽度（像素），覆盖默认值 | 0.3 |
|
||
| strokeColor | string | 否 | 扇区边界线颜色（支持十六进制或 colorPalettes 名称） | "#1f2937" |
|
||
| strokeOpacity | number | 否 | 扇区边界线透明度（0.0-1.0） | 0.15 |
|
||
| outerRadius | number | 否 | 可选兜底外半径，未提供时使用 layers 中最大 rOuter（含 degreeRing） | 500 |
|
||
| theme | object | 是 | 主题配置对象，包含colorPalettes命名配色方案 | 见下方theme说明 |
|
||
| layers | array | 是 | 层配置数组，从内向外定义每一层 | 见下方layers说明 |
|
||
|
||
说明：centerIcon 与 degreeRing 通过 layers 中的 type=centerIcon / degreeRing 配置。
|
||
|
||
**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 |
|
||
| tickLengthStep | number | 否 | 刻度线长度差，minorTick比majorTick短此值，microTick再短此值，0表示长度相同 | 1 |
|
||
| 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 |
|
||
| patternOffset | number | 否 | 规律填色起始偏移（扇区序号，从1开始），默认1 | 2 |
|
||
| 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个以上：平均
|
||
- 单元内自动计算字体大小，单元间无分割线
|
||
|
||
### 扇区内缩规则
|
||
innerFill表示扇区内缩，可能在layer或者sector。layer中配置作用于整个层，sector配置作用于单个扇区。当innerfill=1，内缩1px。
|
||
内缩块的填色规则与不内缩相同，内缩块边界和扇区边界之间的区域填白色。
|
||
如果同某个layer指定了inner Fill，该layer下的某sector中也指定了innerFill，且两者不同，以sector innerFill为准。也就是说sector配置可以对layer配置做修正。
|
||
sector innerFill > layer innerFill
|
||
|
||
### 扇区背景色着色原则：
|
||
colorRef可能在layer或者sector。
|
||
如果同一个sector中指定了colorRef，该sector也指定了layer级别的colorRef，以sector的colorRef为准。
|
||
sector colorRef > layer colorRef > 全局background颜色
|
||
参数：
|
||
startAngle表示第一个扇区的起始角度（以度为单位，0度为正北方向，顺时针增加）
|
||
innerfill仅对num/interval定义的着色扇区生效(目前layer中的innerFill对所有sector生效，暂保持这个逻辑)
|
||
patternOffset表示规律填色起始偏移（扇区序号，从1开始，默认1），未指定时与startAngle对齐，即从第一个扇区开始着色
|
||
num表示连接几个单元着色
|
||
interval表示中间间隔几个单元
|
||
比如num=3,interval=1,意思是从第1个扇区开始着色，对1、2、3扇区着色colorref，4扇区全局背景，5、6、7着色colorref……
|
||
groupSplit: 隐藏同组扇区之间的分割线, false表示不显示group中间分割线。如该参数不设置，取默认值true，显示。
|
||
|
||
规律填色有个特殊情况，divisions mod (num+interval) 不等于 0，比如divisions=16，num=2，interval=1，16mod3=1，多出来的1个应该使用num同样的colorRef和innerFill设定。
|
||
|
||
”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": "土", -- 着色使用的颜色引用
|
||
-- "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 }, -- 只要 layer 配了 colorRef，所有未指定 sector.colorRef 的扇区都用 layer 颜色
|
||
{ "content": "申", "colorRef": "金", "innerFill": 0 }, -- 高优先级着色：金
|
||
{ "content": "酉", "colorRef": "金", "innerFill": 1 }, -- 高优先级着色：金
|
||
{ "content": "戌" },
|
||
{ "content": "亥", "innerFill": 0 } -- 只要 layer 配了 colorRef，所有未指定 sector.colorRef 的扇区都用 layer 颜色
|
||
]
|
||
},
|
||
-- ========================================
|
||
-- 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": "亥" }
|
||
]
|
||
},
|
||
}
|
||
|
||
### 中心icon配置参数，该icon正向指北，可旋转
|
||
rIcon -- 半径
|
||
opacity -- 圆的透明度
|
||
name -- icon文件名svg，路径固定
|
||
|
||
-- ========================================
|
||
-- 中心图标配置 (Center Icon Configuration)
|
||
-- ========================================
|
||
{
|
||
"type": "centerIcon",
|
||
"centerIcon": {
|
||
"rIcon": 50, -- 图标半径，单位：像素
|
||
"opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明）
|
||
"name": "centericon.svg" -- SVG图标文件名，路径固定为 src/assets/icons/ 目录
|
||
}
|
||
}
|
||
|
||
注意：json中如配置了centerIcon，作为第一层。
|
||
|
||
### 360度刻度环配置参数：
|
||
rinner
|
||
router
|
||
showDegree -- 是否显示度数，0不限时，1显示，如显示按10度间隔显示
|
||
mode -- inner（表示刻度线在rInner的外部），outer（表示刻度线在rOuter的内部），both（两边都标注，度数（如有）居于中间）
|
||
opacity -- 圆的透明度，目的是有时候只需要显示刻度，而不用显示圆圈
|
||
|
||
-- ========================================
|
||
-- 360度刻度环配置 (360 Degree Scale Ring)
|
||
-- ========================================
|
||
{
|
||
"type": "degreeRing",
|
||
"degreeRing": {
|
||
"rInner": 350, -- 刻度环内半径
|
||
"rOuter": 380, -- 刻度环外半径
|
||
"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": "#000000",-- 刻度线颜色
|
||
"ringColor": "#000000" -- 圆环颜色
|
||
}
|
||
}
|