使用字体图标
# 字体图标的使用
提示
字体图标做为一种复杂字体,在绘图的过程中十分消耗性能,所以组件采用了一种新的方式,使用字体图标,可有效提高绘图性能。 在绘图中使用字体图标,首先需要将自己要使用的字体图标库引入对应界面,然后整理图谱中需要使用的图标,注册进组件,再做使用。
# 如何注册字体图标
- 首先整理字体图标的名称,内容(Unicode),图标要显示的颜色。
- 调用接口将整理好的图标列表,注册进入组件。
- 添加数据时,数据的style属性中增加icon属性,指定对应的字体图标名称。
# 应用示例
const uicons=[
{name:'猪妹',content:'\ue148',color:`red`},
{name:'提莫',content:'\ue149',color:`yellow`},
{name:'光辉',content:'\ue14a',color:`green`},
{name:'奶妈',content:'\ue14b',color:`blue`}
];
//注册字体图标 参数1:图标的定义 参数2:字体的大小 参数3:字体famliy 参数4:字体默认颜色
graphVis.registIconFonts(uicons,400,'fc-icon-lol','#fff');
graphVis.addNodes([{
id:'node1',
label: '字体图标',
style:{
shape:'circle',
size: 100,
icon : '猪妹', //字体图标的名称
imageOffsetX : 0, //图标的横向偏移
imageOffsetY : -3 //图标的纵向偏移
}
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 字体图标的使用效果图