Question

我想根据背景图像设置画布的高度和宽度。

例如，如果图像的高度和宽度小于屏幕尺寸，则画布尺寸为屏幕的100％；如果图像尺寸大于屏幕尺寸，则画布将根据其进行调整，而不会剪切图像并显示滚动条。

当前，我已经修复了画布的高度和宽度

 <canvas id="canvas" width="720" height="800"></canvas>

，背景图片代码为

 canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), {      
    });

如何使画布的高度和宽度动态化？

Answer 1

我已使用

设置了动态画布大小

    var image = new Image()
    image.src = './img/form.jpg';
    image.onload = function () {
        var canv = $('#canvas');
        canv.attr('width', image.width);
        canv.attr('height', image.height);
        canvas.dispose();
        setTimeout(() => {
            canvas = new fabric.Canvas('canvas');
            canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), {});
        }, 500);

    };

设置布料js画布的高度和宽度的100％

1 个答案: