调整画布背景图像的大小 - Fabricjs

Question

我正在使用fabricjs 来玩画布，并通过javascript 将图像加载到其中。

我有一个功能可以调整画布大小以使其具有响应能力，因此希望调整加载的背景图像的大小以适合画布，但保持纵横比。

我目前还没有找到符合我的标准的例子，希望有人能提供帮助。

JavaScript

var canvas = new fabric.Canvas('drawing_layer');
 var img = new Image();
            img.onload = function () {
                canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
                    originX: 'left',
                    originY: 'top',
                    left: 0,
                    top: 0
                });

// initially sets width of canvas to fit the image
                canvas.setDimensions({
                    width: img.width,
                    height: img.height
                });
            };
// below is a call to function that resizes the canvas
resizeCanvas();

//sets listener to resize event
            window.addEventListener('resize', resizeCanvas);

Answer 1

你的 resizeCanvas() 应该看起来像：

resizeCanvas(width, height) {
  canvas.backgroundImage.scaleToWidth(width);
  canvas.backgroundImage.scaleToHeight(height);
  canvas.setDimensions({width: width, height: height});
  canvas.renderAll();
}

你应该没事。