实现保存定位信息,界面缩放到指定center 位置一直有偏差
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
实现保存center和zoom 用zoomTo 还原定位 出现位置偏差
### Reproduction link / 重现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
*************body**********
保存
刷新
修改定位1
*************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_
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the reproduction's init(), test(), reload(), and graph.zoomTo() entry points, focusing on the different center-coordinate APIs used when saving and restoring the view. Compare the saved center and zoom with the restored viewport in G6 5.x. Done means reloading restores the same center and zoom without the reported position offset.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100