手摸手使用G6实现(轻)图编辑应用系列-后续优化

Byron_Yan
3,003 阅读2分钟

我正在参加「掘金·启航计划」

系列文章：

前言

前四节基本把必要的功能已经实现完成，此节实现一些有必要的优化

优化一

节点间多条线时箭头会重叠，偶尔还会存在箭头交叉问题

lineArrowJiao.png

箭头重叠

lineJiao.png

箭头交叉

  • 优化思路
    • 所有起点终点都设置为圆心，利用边的控制点制造恰当的弯曲程度，来满足大部分场景
    • 具体过程
      • 使用图配置linkCenter设置边连入节点中心
      • 设置后发现箭头不再存在，将节点透明度调低，发现其实是被节点遮挡
      • 自定义箭头中提到箭头可以实现偏移，可通过偏移移动到节点边缘
    • 注：自环边比较特殊，设置linkCenter后，并不会连接节点中心，不需要额外进行箭头偏移

linkArrow.png

优化二

配置fitView后，当画布上节点数很少会自适应容器，导致节点变得很大，不美观

  • 优化思路
    • 不再配置fitView，采用图渲染后，手动调用graph的fitView方法
    • 注：尽量不要看国内镜像的G6官方文档，很多没有同步，描述的不全(除非看源码才能知道)
graph.once('afterrender', e => {
    graph.fitView(20, { onlyOutOfViewPort: true });
})

优化三

画布自适应

  • 优化思路
    • 通过监听窗口变化事件，来获取容器dom宽高，实时调用graph的changeSize方法

优化四

画布背景设置后不显示

  • 优化思路
    • 查看dom层级发现是背景元素层级太低
    • 进行css样式覆写
.container{
    width: 100%;
    height: 100%;
    position: relative;
    /deep/.g6-grid-container{
      z-index: 0 !important;
    }
    /deep/canvas{
      position: relative;
    }
  }

优先五

大量节点、线状态变化时，性能问题

  • 优化思路
    • 默认G6会在更新、删除后触发自动重绘；此处，采用合并操作一同操作的思路
graph.on('node:mouseenter', (ev) => {
   // 关闭自动重绘
   graph.setAutoPaint(false);
   // 状态变化操作
   .....
   // 手动触发绘制
   graph.paint();
   // 开启自动重绘
   graph.setAutoPaint(true);
});

结尾

截至到此，G6实现(轻)图编辑到一段落；后续有新功能以及优化也会继续更新，第一次使用G6实现功能，有错误欢迎大家评论指正

希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励

avatar
文章
阅读
粉丝