调整画布的背景图像 - 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(); 
} 

而且你应该没问题。