如何实现Fabric.js画布与vis-network fit()的缩放平移同步？

我在vis-network的网络背景上用Fabric.js实现用户绘图功能，vis-network的fit()函数能把网络自动缩放平移到适配窗口，但同步Fabric.js画布时出现了问题：当fit后的缩放级别不是1时，Fabric绘制的图形（比如覆盖节点的矩形）会偏移，不再对应原来的节点位置。

现有代码如下：

function myfit() {
    let prevPos = network.getViewPosition()
    let oldScale = network.getScale()
    network.fit({
        position: {x: 0, y: 0},
    })
    let newPos = network.getViewPosition()
    let newScale = network.getScale()
    panCanvas((prevPos.x - newPos.x) * oldScale, (prevPos.y - newPos.y) * oldScale)
    zoomCanvas(newScale)
}
function zoomCanvas(zoom) {
    canvas.zoomToPoint({x: canvas.getWidth() / 2, y: canvas.getHeight() / 2}, zoom)
}

function panCanvas(x, y) {
    let zoom = network.getScale()
    canvas.relativePan(new fabric.Point(x * zoom, y * zoom))
}

单独调用panCanvas和zoomCanvas都正常：网络缩放时调用zoomCanvas，Fabric对象能保持对应位置；平移功能也没问题。但调用myfit()适配网络时，只要最终缩放比例不是1，Fabric图形就会偏移。

注：vis-network的fit()参数position: {x: 0, y: 0}是用来让网络居中，network.getViewPosition()返回当前视图的中心焦点。

举个例子：初始状态下Fabric矩形覆盖两个节点，节点13在视图外；调用myfit()后网络缩小并居中，节点13可见，但Fabric矩形却不再覆盖原来的节点。

问题根源 #

问题出在缩放和平移的顺序以及平移量的计算逻辑上：

1. 当前代码先平移再缩放，但vis-network的fit()是同时完成缩放和平移的，Fabric的缩放会改变坐标空间，先平移后缩放会导致平移量的基准错误。
2. 原来的平移量只考虑了旧缩放比例，没有结合新缩放比例做调整，导致缩放后的平移量不匹配。

修正后的代码 #

调整myfit()的逻辑，先缩放再平移，同时修正平移量的计算公式：

function myfit() {
    // 记录fit前的视图状态
    const prevViewPos = network.getViewPosition();
    const prevScale = network.getScale();
    
    // 执行vis-network的fit操作
    network.fit({ position: { x: 0, y: 0 } });
    
    // 获取fit后的视图状态
    const newViewPos = network.getViewPosition();
    const newScale = network.getScale();
    
    // 第一步：先将Fabric画布缩放到目标比例
    zoomCanvas(newScale);
    
    // 计算正确的平移量：抵消视图中心变化，同时适配缩放比例的改变
    // 核心公式：平移量 = (原视图中心 - 新视图中心) * 原缩放比例 / 新缩放比例
    const panX = (prevViewPos.x - newViewPos.x) * prevScale / newScale;
    const panY = (prevViewPos.y - newViewPos.y) * prevScale / newScale;
    
    // 第二步：执行平移
    panCanvas(panX, panY);
}

function zoomCanvas(targetZoom) {
    // 基于画布中心缩放，和vis-network的fit逻辑对齐
    canvas.zoomToPoint(
        { x: canvas.getWidth() / 2, y: canvas.getHeight() / 2 },
        targetZoom
    );
}

function panCanvas(x, y) {
    // 平移量已经在myfit中计算好，不需要额外乘以缩放比例
    canvas.relativePan(new fabric.Point(x, y));
}

关键调整说明 #

1. 顺序调换：先缩放再平移。Fabric的缩放会改变画布坐标系统，先缩放后平移能保证平移量是基于缩放后的坐标空间计算的，和vis-network的变换逻辑一致。
2. 平移量公式修正：用(原中心-新中心)*原缩放/新缩放计算平移量，这个公式能把vis-network的视图中心变化，转换为Fabric画布需要的准确像素偏移，适配不同缩放比例的情况。
3. 移除多余缩放因子：panCanvas里不再需要乘以network的缩放比例，因为平移量已经在myfit中完成了适配计算，避免重复缩放导致偏移。

内容的提问来源于stack exchange，提问作者Nigel