FabricJS zoomIn和zoomOut偏移背景图像

Question

我正在尝试为设置了背景图像的画布实现zoomIn和zoomOut功能。放大和缩小的工作原理除外，但当我缩放时，设置的背景图像占据了画布的整个宽度/高度现在偏离中心了。

我尝试过使用变焦座标，但不确定是什么原因引起的

function addImage(imgWidth, imgHeight) {
var imageSrc = $('#generated-img').attr('src');
scaleMultiplier = canvas.width / imgWidth;

fabric.Image.fromURL(imageSrc, function(oImg) {
    canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas), {
        left: canvas.width / 2 - newWidth / 2,
        top: canvas.height / 2 - newHeight / 2,
        //scaleX: canvas.width / oImg.width,
        //scaleY: canvas.height / oImg.height,
        padding: 0,
        cornersize: 0,
        zIndex: -1,
    });
});

$('#canvas-wrapper').show();
drawBox();
zoomCanvas();
lockCanvas();

}

function zoomCanvas() {
canvas.on('mouse:wheel', function(opt) {
    var delta = opt.e.deltaY;
    var pointer = canvas.getPointer(opt.e);
    var zoom = canvas.getZoom();
    zoom = zoom - delta * 0.0008;
    if (zoom > 9) {
        zoom = 9;
    }
    if (zoom < 1) {
        zoom = 1;
    }
    canvas.zoomToPoint({
        x: opt.e.offsetX,
        y: opt.e.offsetY
    }, zoom);
    this.requestRenderAll();
    opt.e.preventDefault();
    opt.e.stopPropagation();
    if (canvas.getZoom().toFixed(5) > 15) {
        console.log("zoomIn: Error: cannot zoom-in anymore");
        return;
    }
    if (canvas.getZoom().toFixed(5) <= 1) {
        console.log("zoomOut: Error: cannot zoom-out anymore");
        return;
    }
});

}

在放大之前，我只需要将它缩放到画布上设置图像的方式即可。