关于javascript: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'
})

5. 以上办法都不见效，敞开部分渲染 graph.get('canvas').set('localRefresh', false)。这个办法可能导致性能有所升高。