实现保存定位信息，界面缩放到指定center 位置一直有偏差 #6093

Describe the bug / 问题描述

实现保存center和zoom 用zoomTo 还原定位 出现位置偏差

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

*****body** <div id="container" style="width: 100vw;height: 100vh;"> </div> <button onclick="test()">保存</button> <button onclick="reload()">刷新</button> <button onclick="changePosition1()">修改定位1</button>

*****body**

*****script** var graph ='' const data = { // 点集 nodes: [ { id: 'node1', // String，该节点存在则必须，节点的唯一标识 x: 100, // Number，可选，节点位置的 x 值 y: 200, // Number，可选，节点位置的 y 值 }, { id: 'node2', // String，该节点存在则必须，节点的唯一标识 x: 300, // Number，可选，节点位置的 x 值 y: 200, // Number，可选，节点位置的 y 值 }, ], // 边集 edges: [ { source: 'node1', // String，必须，起始点 id target: 'node2', // String，必须，目标点 id }, ], }; init() function init(){ if(graph){ graph.destroy() graph=null } graph = new G6.Graph({ modes: { default: ['drag-canvas', 'zoom-canvas', 'drag-node'], }, container: 'container', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身 width: 800, // Number，必须，图的宽度 height: 500, // Number，必须，图的高度 }); graph.data(data); // 读取 Step 2 中的数据源到图上 graph.render(); // 渲染图 // console.log('getViewPortCenterPoint0',graph.getViewPortCenterPoint()) // console.log('getGraphCenterPoint0',graph.getGraphCenterPoint()) let position=localStorage.getItem('position') if(position){ let pp=JSON.parse(position) let client= graph.getClientByPoint(pp.center.x, pp.center.y) let client1= graph.getCanvasByPoint(pp.center.x, pp.center.y) console.log('pp',pp) console.log('client',client) console.log('client1',client1) graph.zoomTo(pp.zoom,client1)

            let zoom=graph.getZoom()
            let center=graph.getGraphCenterPoint()
            console.log('zoom',zoom)
            console.log('center',center)
        }
    }
    function test(){
        let zoom=graph.getZoom()
        let center=graph.getViewPortCenterPoint()
        let center1=graph.getGraphCenterPoint()
        console.log('savezoom',zoom)
        console.log('center111',center1)
        console.log('savecenter',graph.getGraphCenterPoint())

        let positon={
            zoom:zoom,
            center:center
        }

        localStorage.setItem('position',JSON.stringify(positon))
        // console.log('getViewPortCenterPoint',graph.getViewPortCenterPoint())
        // console.log('getGraphCenterPoint',graph.getGraphCenterPoint())

        // console.log('getPointByClient',graph.getPointByClient(0,0))
        // console.log('getClientByPoint',graph.getClientByPoint(0, 0))
        // console.log('getPointByCanvas',graph.getPointByCanvas(0, 0))
        // console.log('getCanvasByPoint',graph.getCanvasByPoint(0, 0))

    }
    function changePosition1(){
        graph.zoomTo(1,{x:0,y:0})
    }
    function reload(){
        init()
    }

*****script**

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response