пытаясь заставить фон fabri c. js css действовать как css покрытие с центром в центре - PullRequest
0 голосов
/ 16 января 2020

Я там,

Я разрешаю пользователю добавлять свой собственный фон к холсту fabri c. js и я sh, чтобы фон действовал как следующий CSS поведение:

background-position: center center;
background-size: cover;

следующий код не дает мне результат, который я ищу

var canvasHeight = canvas.height;
var canvasWidth = canvas.width;


console.log("canvasHeight: " + canvasHeight);
console.log("canvasWidth: " + canvasWidth);


    var zurl = "server/php/files/camel4.jpg";
    window.fabric.Image.fromURL(zurl, (img) => {


        console.log("img.width: " + img.width);
        console.log("img.height: " + img.height);


        var canvasAspect = canvasWidth / canvasHeight;
        var imgAspect = img.width / img.height;
        var left, top, scaleFactor;

        if (canvasAspect >= imgAspect) {
            var scaleFactor = canvasWidth / img.width;
            left = 0;
            top = -((img.height * scaleFactor) - canvasHeight) / 2;
        } else {
            var scaleFactor = canvasHeight / img.height;
            top = 0;
            left = -((img.width * scaleFactor) - canvasWidth) / 2;

        }

        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
            top: top,
            left: left,
            originX: 'left',
            originY: 'top',
            scaleX: scaleFactor,
            scaleY: scaleFactor
        });
        canvas.renderAll();
    })

Можете ли вы помочь мне настроить мой код. Спасибо

...