Fabricjs 缩放和平移以匹配 vis.network 适合

Question

我正在使用fabricjs来允许用户在使用vis.network显示的 a.network 的背景中绘制对象。 vis.network 的功能之一是fit() function，它可以缩放和平移 .network 以便它整齐且完全适合 window。但是，我需要缩放和平移背景（即 fabricjs canvas ）匹配。 我发现很难弄清楚如何做到这一点。

到目前为止，我的代码如下所示：

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都按它们应该的方式工作，即如果 .network 被放大或缩小并且zoomCanvas使用新的缩放级别（从network.getScale()获得）被调用，背景对象被放大或缩小以匹配（例如。 .g 如果 fabric rect覆盖在 .network 节点上，它在缩放后保持覆盖）。 panCanvas也可以。 但是，如果使用myfit()来适应 window 中的 .network，并且最终缩放级别 ( newScale ) 不是 1（如果整个 .network 太大而无法适应 window，则vis.network减少缩放直到它发生），织物对象被置换。 似乎需要一些其他的平底锅量公式。

vis.network fit() function 参数position: {x: 0, y: 0}将 the.network 居中。 network.getViewPosition()返回视图的当前中心焦点。

一个例子如下所示。 在第一个图像3中，红色和黑色织物矩形对象已放置在两个 .network 节点上。 另一个节点（节点 13）在视图之外并且不可见。 然后myfit() ，结果是第二张图片4 。 The.network 已经缩小并居中，节点 13 不可见，但织物矩形不再像它们应该的那样位于它们的节点上方。

Answer 1

好吧，我最终解决了。 规则是，始终以缩放 1 平移。这可能意味着您必须记录当前缩放、缩放到 1、平移，然后恢复到之前的缩放级别。 myfit的工作版本是：

function myfit() {
    let prevPos = network.getViewPosition()
    network.fit({
        position: {x: 0, y: 0}, // fit to centre of canvas
    })
    let newPos = network.getViewPosition()
    let newScale = network.getScale()
    zoomCanvas(1.0)
    panCanvas((prevPos.x - newPos.x), (prevPos.y - newPos.y), 1.0)
    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))
}