FabricJS zoomIn и zoomOut смещает фоновое изображение - PullRequest
Новая
       23

FabricJS zoomIn и zoomOut смещает фоновое изображение

0 голосов
/ 19 июня 2019

Я пытаюсь реализовать функцию 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;
    }
});

}

Мне просто нужно уменьшить масштаб до того, как изображение было установлено на холсте перед увеличением.

...