头图

功能概述:在当前一张许多节点的画布中,仅展示某些节点,其它的透明度为0(占位的,相当于css的opacity:0),并且在视口范围内居中它们(展示的那些)。

查看Antv G6官方文档,找到fitView这个方法,
但问题是fitView中是根据canvas整个画布大小来适应的,不支持自定义居中范围。所以看了下源码,这地方改一下就能满足需求了:

  1. 循环所有节点,找到展示的节点,并把它的x轴坐标放入x轴数组中,把它的y轴坐标放y轴数组中;如果这两个数组有一个为空则结束
  2. 获得画布宽度=x轴最大值-x轴最小值 ——groupWidth
  3. 获得画布高度=y轴最大值-y轴最小值 ——groupHeight
  4. 之后的代码就直接copy就行哈哈,关键就改bbox的属性,把它改为展示画布的宽高。
    image.png

fitViewByRules函数中,接收3个参数:
onlyOutOfViewPort:true || false//如果为true,代表画布没超出视口的会被放大居中
direction:'x' || 'y'|| 'both' // 以哪边方向的缩放比为准,如果是x轴,有可能上下两端会超出视图
ratioRule:'min' || 'max' // 如果direction是both,会根据x轴和y轴取最大值或最小值比较得到缩放比例


洋仔
191 声望3 粉丝

目前目标:手写深拷贝、阅读axios源码并掌握。