85 lines
4.3 KiB
Markdown
85 lines
4.3 KiB
Markdown
|
||
## Json文件配置
|
||
1. 扇区背景色着色原则：
|
||
最高优先级，在layer中指定colorRef
|
||
第二优先级：colorRef规律填色，也就是说，如果同一个sector中指定了colorRef，该sector也指定了layer级别的colorRef，以前者为准，innerFill使用相同规则。
|
||
参数：
|
||
innerfill对着色区域生效
|
||
start表示着色起始扇区
|
||
num表示连接几个单元着色
|
||
interval表示中间间隔几个单元
|
||
比如start=2,num=3,interval=1,意思是从第二个扇区开始着色，对2、3、4扇区着色colorref，5扇区全局背景，6、7、8着色colorref……
|
||
|
||
-- ========================================
|
||
-- 第4层：地支 (12等分)
|
||
-- ========================================
|
||
-- 演示：规律填色 - 3个着色，1个间隔
|
||
-- 着色规律：start=2, num=3, interval=1
|
||
-- 效果：扇区2-4着色，5空白，6-8着色，9空白，10-12着色，1空白
|
||
”layers“:
|
||
{
|
||
{
|
||
"divisions": 12,
|
||
"rInner": 160,
|
||
"rOuter": 200,
|
||
"innerFill": 1, -- 着色区域的内缩设置
|
||
"colorRef": "土", -- 着色使用的颜色引用
|
||
"start": 2, -- 从第2个扇区开始着色（1-based索引）
|
||
"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 }
|
||
]
|
||
}
|
||
}
|
||
|
||
2. 中心icon配置参数
|
||
rIcon -- 半径
|
||
opacity -- 圆的透明度
|
||
name -- icon文件名svg，路径固定
|
||
|
||
-- ========================================
|
||
-- 中心图标配置 (Center Icon Configuration)
|
||
-- ========================================
|
||
"centerIcon": {
|
||
"rIcon": 50, -- 图标半径，单位：像素
|
||
"opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明）
|
||
"name": "taiji.svg" -- SVG图标文件名，路径固定为 /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, -- 刻度线长度，单位：像素, minorTick比majorTick短1px， microTick比minorTick短1px
|
||
"majorTick": 10, -- 主刻度间隔（度），如 10 表示每 10° 一个主刻度
|
||
"minorTick": 5, -- 次刻度间隔（度），如 2 表示每 2° 一个次刻度
|
||
"microTick": 1, -- 微刻度间隔（度），如 1 表示每 1° 一个微刻度
|
||
"tickColor": "#ffffff",-- 刻度线颜色
|
||
"ringColor": "#ffffff" -- 圆环颜色
|
||
}
|
||
|