144 lines
8.0 KiB
Markdown
144 lines
8.0 KiB
Markdown
|
||
# 优化
|
||
## 当前实现优化点
|
||
1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。优化为统一使用json配置来实现罗盘绘制。
|
||
2. 扇区的内容可以是是文字或者SVG图标，如为SVG，sectors的content中指定svg文件名，SVG布局规则同文字。
|
||
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使用相同规则。
|
||
参数：
|
||
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": "亥" }
|
||
]
|
||
},
|
||
}
|
||
|
||
2. 中心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/ 目录
|
||
}
|
||
|
||
3. 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" -- 圆环颜色
|
||
}
|
||
|