当前位置: 首页 > Web前端 > JavaScript

【antvG6】视图操作FitView-partialcentering

时间:2023-03-27 11:33:54 JavaScript

功能概述:在当前有很多节点的画布中,只显示部分节点,其他的透明度为0(占用,相当于cssopacity:0),居中它们(显示的那些)在视口边界内。查看AntvG6官方文档,找到fitView方法,问题是fitView是根据canvas的整个canvas大小适配的,不支持自定义居中范围。所以看了源码后,这个地方可以改成满足需要:循环遍历所有节点,找到显示的节点,将其x轴坐标放入x轴数组,将其y轴坐标放入y轴数组;如果两个数组之一为空,则结束。获取画布宽度=x轴最大值-x轴最小值-groupWidth获取画布高度=y轴最大值-y轴最小值-groupHeight后面的代码直接复制哈哈,关键是改变bbox的属性,改变它来显示画布的宽度和高度。fitViewByRules函数中,接收3个参数:onlyOutOfViewPort:true||false//如果为true,表示画布不超过视口将放大并居中direction:'x'||'你'||'both'//以哪个方向的缩放比例为准。如果是x轴,上下两端可能超出视图。ratioRule:'min'||'max'//如果方向为both,则根据x轴和y轴取最大或最大值最小值比较得到缩放