关于前端:Antv-G6视图操作FitView局部居中

50次阅读

共计 492 个字符,预计需要花费 2 分钟才能阅读完成。

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

问题是 fitView 中是依据 canvas 画布大小来适应的,看了下源码,这中央改一下就能满足需要了:

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

fitViewByRules 函数中,接管 3 个参数:
onlyOutOfViewPort:true || false// 如果为 true,代表画布没超出视口的会被放大居中
direction:’x’ || ‘y’|| ‘both’ // 以哪边方向的缩放比为准,如果是 x 轴,有可能高低两端会超出视图
ratioRule:’min’ || ‘max’ // 如果 direction 是 both,会依据 x 轴和 y 轴取最大值或最小值比拟失去缩放比例

正文完
 0