G6踩坑之渲染页面保持上次的画布的大小以及位置

一、保持缩放比例

//在拉取新数据重新渲染页面之前先获取当前缩放比例
const zoom = graph.getZoom();

//此处获取数据
await getData()

//缩放至之前的比例
graph.zoomTo(zoom);

二、保持画布位置
原理:记录初始位置和末尾位置的相对距离,在重新渲染介绍之后移动对应的距离即可

//在拉取新数据重新渲染页面之前先获取点(0, 0)在画布上的位置
const lastPoint = graph.getCanvasByPoint(0, 0);

//此处获取数据。。。
await getData()

//获取重新渲染之后点(0, 0)在画布的位置
const newPoint = graph.getCanvasByPoint(0, 0);

//移动画布相对位移
graph.translate(lastPoint.x - newPoint.x, lastPoint.y - newPoint.y);

三、保持缩放比例和画布位置
在一起使用时注意,先缩放后移动位置

阅读 85

推荐阅读