4.8 KiB
优化
当前实现优化点
- 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。以后统一使用json配置来实现罗盘绘制。
- 扇区的内容可以是是文字或者SVG图标，如为SVG，sectors的content中指定svg文件名，SVG布局规则同文字。
- 废弃目前颜色生成规则。使用在Json中严格配置。详见《Json文件配置》。总体规则是：优先级低到高分别是，全局背景色 - layer着色 - sectors着色。
Json文件配置
-
扇区背景色着色原则： 最高优先级，在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 } ] } }
-
中心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/ 目录 }
- 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" -- 圆环颜色 }