javascript - 调整 Canvas 背景图像的大小 - Fabricjs

Question

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

我有一个调整 Canvas 大小以使其响应的功能，因此我想调整加载的背景图像的大小以适应 Canvas ，但保持纵横比。

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

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();
}

你应该没问题。