g6/iconfont.zh.md at 554b8b8bf3533b712540a64faaa83558c84f58d4

test/g6

mirror of https://gitee.com/antv/g6.git synced 2024-12-15 01:51:00 +08:00

Yanyan-Wang 3095544cdf chore: commit history cleaning

2023-02-02 10:31:36 +08:00

9.4 KiB

Raw Blame History

title	order
使用 Iconfont	10

简介

为什么使用 iconfont？兼容性好、种类多、多色等。在此不做过多介绍，请直接移步阿里巴巴-iconfont 平台。

效果

下载字体图标

直接到阿里巴巴字体图标库搜索下载即可，简要操作流程是：搜索图标（例如篮球）-> 选择自己喜欢的图标添加入库 -> 点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个 -> 在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：
download

选中红色区域的所有文件（这里面很多文件是不需要的，为了方便起见，我们全部复制即可，不需要的也不会被打包），复制到项目里面，一般放在目录 'static/icons' 或者 'assets/icons' 下面，如果没有的话可以新建目录，当然你也可以放到任意你喜欢的位置，只要引入的时候路径对即可，到此 iconfont 引入完毕。

PS: 本案文件目录为 '/static/icons'。

引入 G6

多种引入方式，请移步快速上手。
PS: 本案例简单粗暴，通过 CDN 的方式引入。

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

添加字体图标

引入方式可自行选择，下面为在 HTML 中引入的例子：

<style>
  @import '/static/icons/iconfont.css';
</style>

使用字体

G6.registerNode('iconfont', {
  draw(cfg, group) {
    const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;

    if (backgroundStyle) {
      group.addShape('circle', {
        attrs: {
          x: 0,
          y: 0,
          r: cfg.size,
          ...backgroundStyle,
        },
        // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
        name: 'circle-shape',
      });
    }

    const keyShape = group.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
        textAlign: 'center',
        textBaseline: 'middle',
        text: cfg.text,
        fontSize: cfg.size,
        ...style,
      },
      // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
      name: 'text-shape1',
    });
    const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

    group.addShape('text', {
      attrs: {
        x: 0,
        y: labelY,
        textAlign: 'center',
        text: cfg.label,
        ...labelStyle.style,
      },
      // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
      name: 'text-shape1',
    });
    return keyShape;
  },
});

const COLOR = '#40a9ff';
const graph = new G6.TreeGraph({
  container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: ['collapse-expand', 'drag-canvas', 'drag-node'],
  },
  defaultNode: {
    backgroundConfig: {
      backgroundType: 'circle',
      fill: COLOR,
      stroke: 'LightSkyBlue',
    },
    type: 'iconfont',
    size: 12,
    style: {
      fill: '#fff',
    },
    labelCfg: {
      style: {
        fill: COLOR,
        fontSize: 12,
      },
    },
  },
  // 布局相关
  layout: {
    type: 'compactBox',
    direction: 'LR',
    getId(d) {
      return d.id;
    },
    getHeight() {
      return 16;
    },
    getWidth() {
      return 16;
    },
    getVGap() {
      return 20;
    },
    getHGap() {
      return 60;
    },
  },
});

graph.edge(({ target }) => {
  const fill = target.get('model').backgroundConfig && target.get('model').backgroundConfig.fill;
  return {
    type: 'cubic-horizontal',
    color: fill || COLOR,
    label: target.get('model').relation || '',
    labelCfg: {
      style: {
        fill: fill || COLOR,
        fontSize: 12,
      },
    },
  };
});

const data = {
  isRoot: true,
  id: 'Root',
  label: '可疑人员王**',
  text: '\ue6b2', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。
  style: {
    fill: 'red',
  },
  labelCfg: {
    style: {
      fill: 'red',
    },
  },
  backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
  size: 30,
  children: [
    {
      id: 'SubTreeNode1',
      label: '**网咖',
      text: '&#xe605;',
      relation: '上网',
      children: [
        {
          id: 'SubTreeNode2',
          label: '多伦多',
          text: '&#xe64b;',
        },
        {
          id: 'id1',
          label: '小王',
          text: '&#xe622;',
          children: [
            {
              id: 'SubTreeNode1.2.1',
              label: '182****2123',
              text: '&#xe60d;',
            },
            {
              id: 'SubTreeNode4',
              label: '今晚在吗',
              text: '&#xe629;',
            },
          ],
        },
      ],
    },
    {
      id: 'SubTreeNode3',
      label: 'subway',
      text: '&#xe653;',
      children: [
        {
          id: 'SubTreeNode3.1',
          label: '王五',
          text: '&#xe622;',
        },
        {
          id: 'SubTreeNode3.2',
          label: '张三',
          text: '&#xe622;',
        },
      ],
    },
    {
      id: 'SubTreeNode5',
      label: '小花',
      relation: '老婆',
      text: '&#xe74b;',
      backgroundConfig: {
        fill: 'Coral',
      },
      style: {
        fill: '#fff',
      },
      labelCfg: {
        style: {
          fill: 'Coral',
        },
      },
      children: [
        {
          id: 'SubTreeNode1.2.1',
          label: '182****2123',
          text: '&#xe60d;',
          relation: '通话',
          backgroundConfig: {
            fill: 'Coral',
          },
          style: {
            fill: '#fff',
          },
          labelCfg: {
            style: {
              fill: 'Coral',
            },
          },
        },
        {
          id: 'SubTreeNode3.3',
          label: '凶器',
          text: '&#xe673;',
          relation: '指纹',
          backgroundConfig: {
            fill: 'Coral',
          },
          style: {
            fill: '#fff',
          },
          labelCfg: {
            style: {
              fill: 'Coral',
            },
          },
        },
      ],
    },
    {
      id: 'SubTreeNode6',
      label: '马航37*',
      relation: '乘坐',
      text: '&#xe610;',
    },
  ],
};

graph.data(data);
graph.render();

注意事项

看了代码大家应该很清楚了，实质就是用了 text 图形，但有几个需要注意的地方：
1、text 的 fontFamily 必须和 iconfont.css 里面的 font-family 保持一致：
download

2、data 里面的 text 使用的是 iconfont.css 里面的 content，注意加 u 。如有需要可自行复制。

3、若出现了第一次渲染 iconfont 错误（可能显示成一个方框），可以检查下是否已经加载字体文件

如果页面中没有使用字体图标的节点，字体文件是不会自动下载的，那么可以添加一个隐藏节点用以触发加载。如果已经加载，那么可以尝试以下代码刷新渲染。

// 在 graph.render() 之后调用以下语句：
setTimeout(() => {
  graph.paint();
}, 16);

工具函数 getIcon

我们可以将 unicode 的转化封装成函数使用。这里注意，手动拼接 unicode 是不行的（\\u${icon.unicode}）。这里采用 iconfont.json 中的 code_decimal 进行转化。详细参考《MDN String.fromCodePoint》。

import fonts from '../fonts/iconfont.json';

const icons = fonts.glyphs.map((icon) => {
  return {
    name: icon.name,
    unicode: String.fromCodePoint(icon.unicode_decimal), // `\\u${icon.unicode}`,
  };
});
const getIcon = (type: string) => {
  const matchIcon = icons.find((icon) => {
    return icon.name === type;
  }) || { unicode: '', name: 'default' };
  return matchIcon.unicode;
};

用法

 {
    type: 'text',
    attrs: {
        id: 'node-icon',
        x: 0,
        y: 0,
        fontSize: iconSize,
        fill: primaryColor,
        text: getIcon('logo'), // logo 为 unicode 对应的 name
        fontFamily: 'iconfont', // 对应 CSS 里面的 font-family: "iconfont";
        textAlign: 'center',
        textBaseline: 'middle',
    },
  }

9.4 KiB Raw Blame History Unescape Escape

简介

效果