AntV G6 的坑之——渲染残留/残影

AntV G6 是一款图可视化与分析开源引擎。《AntV G6 的坑之——XXX》系列文章持续更新中，总结常见问题及神坑解决方案。任何问题可在 GitHub Issue 中提问，求 GitHub Star ⭐️https://github.com/antvis/g6

原文链接：https://g6.antv.antgroup.com/...

G6 4.x 依赖的渲染引擎 @antv/g@4.x 版本支持了局部渲染，带了性能提升的同时，也带来了图形更新时可能存在渲染残影的问题。比如拖拽节点时，节点的文本会留下轨迹。由于目前 @antv/g 正在进行大版本的升级（到 5.x），可能不考虑在 4.x 彻底修复这个问题。当我们遇到这个问题的时候，考虑通过下面几种方法解决：

1. 检查节点中的图形，包括文本图形，样式配置中是否存在非法值，例如 null、NaN 等；
2. 尽量使用整数作为数值型的样式值，例如 r、width、height、fontSize 等；
3. 使用浏览器字体作为 labelCfg.style.fontFamily 或留下残影的文本图形的 fontFamily 属性；
4. 给文本增加白色描边，如：

// 节点/边/ combo 的文本配置
labelCfg: {
  style: {
    stroke: '#fff',
    lineWidth: 4
  }
}
// 自定义节点/边/ combo 中的文字图形
group.addShape('text', {
  attrs: {
    // ... other attributes,
    stroke: '#fff',
    lineWidth: 4,
  },
  // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
  name: 'text-shape'
})

1. 以上方法都不奏效，关闭局部渲染 graph.get('canvas').set('localRefresh', false)。这个方法可能导致性能有所降低。